HTML5+CSS3学习错误1

使用html5和css3来制作网站时，
因为大多数文本要设置css样式，且一般文本字数不是很多，所以建议使用标签包裹起来，如<ul><li></li></ul>以及<span></span> 等等
举一个栗子
在这里插入图片描述

制作这样的一个div盒子。
错误示范

<style>
............(样式略过)
</style>
<body>
<div>
		课程导航
		<hr/>
    <span>ACCP 软件工程师</span>
    <hr/>
    BTEST 软件测试工程师
    <hr/>
    BENET 网络工程师
    <hr/>
    JBNS 网站工程师
    <hr/>
    ACCP 启蒙星
    <hr/>
    ANDROID 软件工程师
    <hr/>
    JAVA 软件工程师
    <hr/>
    .NET 软件工程师
    <hr/>
    </div>
    </body>
    网络营销

	</div>

当为每个文本设置样式时就犯愁了。。。
“每个文本都要写<span></span>标签?”
正确示范

<link href="css/course.css" rel="stylesheet" type="text/css" />
<div id="course_list">
  <h1 class="titles">课程导航</h1>
    <ul>
<li class="current"><a href="#">ACCP 软件工程师</a></li>
          <li><a href="#">BTEST 软件测试工程师</a></li>
          <li><a href="#">BENET 网络工程师</a></li>
          <li><a href="#">JBNS 网站工程师</a></li>
          <li><a href="#">ACCP 启蒙星</a></li>
          <li><a href="#">ANDROID 软件工程师</a></li>
          <li><a href="#">JAVA 软件工程师</a></li>
          <li><a href="#">.NET 软件工程师</a></li>
          <li><a href="#">网络营销</a></li>
        </ul>
      </div>

而在css页面


body,ul, li, h1 {
	padding:0px;
	margin:0px;
}
li {
	list-style:none;
}
#course_list {
	width:220px;
	border:1px #aacbee solid;
	padding:0px 0px 10px 0px;
	background-color:#f5f9fc;
	margin:0px auto;
}
.titles {
	background:url(../image/title_icon.gif) 5px 8px no-repeat;
	padding-left:25px;
	color:#1f376d;
	font-size:14px;
	line-height:30px;
	height:30px;
}
#course_list ul {
	padding:0px 5px;
}
#course_list ul li {
	height:30px;
	background:url(../image/submenu.gif) right center no-repeat;
	line-height:30px;
	padding-left:5px;
	border-top:1px #cfe2f5 solid;
}
#course_list ul a {
	text-decoration:none;
	color:#000000;
}
#course_list ul a:hover {
	text-decoration:none;
	color:#FF6215;
}

html页面和css页面分开，按照使用<ul><li></li></ul> 还有<hr>的结构包裹文本，又通过结构有条理的设置css样式，
从标题titles 到ul ,然后是到里面 li ,再到 li 中的<a>
标题之所以使用.title 而不是作为li 是因为，标题和接下来的超链接列表是不一样的
为了让超链接列表设置统一。
代码看起来不凌乱，很有条理。
所以这给初学者的启示是：
在敲代码前一定要思考怎么布局，先搭建好一个正确的结构，然后按结构设置样式。不要做一步看一步，没有什么条理，看到这里有什么，就设置什么样式。
代码不要凌乱，要有层次感，结构感，功能要单一，尽量使用外部样式表连接。

还有元素的名称一般以结构来命名，在css页面会很有条理，不要随便取。
例如<hr> 里的class命名为.tilte 在css页面查看，就很有条理。

然后我仔细观察发现，这个div盒子根本没有设置宽高，完全是内容撑起了的。
一开始就使用qq截图来测盒子宽高的我宛如智障。(・ω・｀ll)

HTML5+CSS3学习错误1

猜你喜欢