html+css代码（CSS样式代码）

html+css实例源代码：实例代码

CSS样式代码

/*通过ID 选择器设置元素样式*/

#div1{background: #9a9af8 ;/*设置背景颜色*/

margin: 0 15%;/*外边距 上下边距为0px 左右边距为父元素的15% 主要是为了适应不同浏览器的显示要求 ，利用百分比显示*/

}

/*通过元素选择器h1设置样式*/

h1{

height: 70px;/*高度*/

color: white;/*字体颜色*/

background: cornflowerblue;/*背景颜色*/

line-height: 70px;/*行间距*/

text-indent: 50px;/*文本首行缩进*/

}

/*通过id选择器设置导航居中*/

#div2{

text-align: center;/*居中显示*/

}

/*后代选择器 div2 里面的li元素*/

#div2 li{

display: inline-block;/*行内块装元素*/

width: 100px;/*宽度**/

height: 30px;/*高度*/

background: cornflowerblue;/*背景颜色*/

line-height: 30px;/*行间距*/

border: 2px solid cornflowerblue;/*边框*/

border-radius: 0 20px;/*边框四个角的弧度*/

}

#div2 li a{

text-decoration: none;/*边去除a标签的下划线*/

color: white;/*字体颜色*/

}

/*通过设置a标签的伪类选择器：hover 设置字体加粗，鼠标放在字体上加粗*/

#div2 li a:hover{font-weight: bold;}

/*通过类选择器class设置样式*/

.center{text-align: center;}/*设置居中*/

/*后代选择器 center 里面的img video 元素*/

.center img{width: 190px;height: 300px;margin:0 10px;}

.center video{width: 650px;height: 300px;margin:0 10px;}

.margin{margin: 0 5%;}/*外边距*/

.margin p{text-indent: 2em;}

textarea{width: 100%;height: 100px;}/*父元素的比例*/

#copyright{background: cornflowerblue;

text-align: center;

color: white;

height: 70px;

line-height: 70px;

font-size: 12px;

}

---------------------------------------------

html+css实例源代码：实例代码

上面就是小居数码小编今天给大家介绍的关于（CSS样式代码）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• cad尺寸标注样式设置详细图文教程（CAD设置尺寸标注）
• word样式与格式设置步骤（word文档如何设置样式）
• 无法激活的解决办法（autocad2020安装失败错误代码1603）
• 按键精灵定时启动脚本的代码（脚本也能有定时功能吗）

（514）个朋友认为回复得到帮助。