目录
去掉li前面的项目符号(小圆点)
语法:
list-style: none;
CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display/position/float/clear/visibility/overflow(建议第一个写display,毕竟关系到模式)
- 自身属性:width/height/margin/padding/border/background
- 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性(CSS3):content/cursur/border-radius/box-shadow/text-shadow/background
确定版心
假设页面的版型是1200px,每个版心都要水平居中对齐,可以定义版心为公共类:
.w {
width: 1200px;
margin: auto;
}
导航栏制作注意点
是集开发中,一般使用(li+a)的组合标签
优点:
- li+a语意更清晰。
- 如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(容易被搜索引擎降权),从而影响网站排名
- 若要让导航栏在一行内显示,这需要给li标签加浮动。因为li标签是块级元素,它会一行显示一个标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
/*靠左浮动*/
float: left;
width: 100px;
height: 40px;
background-color: pink;
}
</style>
<body>
<div class='nav'>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
</body>
</html>
结果:
圆角边框
通过border-radius属性用于设置元素的外边框圆角
语法:
border-radius:length;
- 参数值可以为数值或者百分比
- 如果是正方形盒子,想要变成一个圆,这需要把数字修改为高或者宽的一半(50%)
- 如果是矩形,这需要设置为高度的一半即可
- 该属性是一个简写属性,可以跟四个值,分别代表:左上角,右上角,右下角,左下角
- 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>此属性用于为元素添加圆角:</p>
<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>
</body>
</html>
结果;