应用CSS 标准流和float以及html进行一个网页编写的练习以及发现的注意事项

最新推荐文章于 2024-11-14 09:54:48 发布

一麻袋小猫

最新推荐文章于 2024-11-14 09:54:48 发布

阅读量223

点赞数 1

文章标签： html5 css

本文链接：https://blog.csdn.net/Zmongo/article/details/104104603

版权

CSS属性书写顺序：
布局定位属性：display/position/float/clear/visiblity/overflow
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（css3）：contect/cursor/border-radius/box-shadow/text-shaow/background:linear-gradient
布局流程：确定页面的版心也就是可视区；分析页面中的行模块。以及每个行模块中的列模块。页面布局就是一行行罗列而成的。
多类名使用，把版心放在一个类里，要引用的时候直接调用就可以。
注意写css初始化
/清除元素默认的内外边距/
{
margin: 0;
padding: 0;
}
li {
list-style: none;
/清除列表样式/
}
做导航栏时，发现ul>li>a 有高度并且字数均不相同而且有下边框，此时要转化为行内块元素，但无法确定宽度，就用padding值撑开，使得内容值加上左右内边距的值为下边框的值。

背景图片的位置可以在属性里直接设定：background: #1c036c url(images/banner2.jpg) no-repeat top center;

在写导航栏时发现顺序是非常重要的，子盒子与父亲左右有距离时可以先给父亲盒子padding，并不一定都要用width，有些用width反而不方便。
子盒子有浮动就不会有外边距塌陷的问题。
行高等于高度只能让单行文本垂直居中此时可以调整li的高度，文字靠左上角，使文字看起来像垂直居中。
10.块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷
可以被继承的样式：font-,text-.lin-,color
行内元素只有左右内外边距，没有上下内外边距。
让粗体不加粗：font-weight : 400;
子盒子可以比父盒子大
清除浮动只有在父亲没有给高，孩子浮动的情况下用，而且兄弟元素是标准流，要清除浮动。而且是影响到下面布局了，要清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学成在线</title>
	<link rel="stylesheet" href="style(1).css">
</head>
<body>
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png">
		</div>
		<!-- nav -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" />
			<span>lilei-hanmeimei</span>
		</div>
	</div>
	<!-- header头部模块结束 -->
	<!-- banner部分开始 -->
	<div class="banner">
		<!-- 有版心才能写左右 -->
		<div class="w">
			<!-- 左侧subnav -->
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">后端开发<span>></span></a></li>
					<li><a href="#">移动开发<span>></span></a></li>
					<li><a href="#">人工智能<span>></span></a></li>
					<li><a href="#">前端开发eeeeee<span>></span></a></li>
					<li><a href="#">前端开发ee<span>></span></a></li>
					<li><a href="#">前端开eee发<span>></span></a></li>
					<li><a href="#">前端开ee发<span>></span></a></li>
					<li><a href="#">前端eee开发<span>></span></a></li>
				</ul>
			</div>
			<!-- .course -->
			<div class="course">
				<div class="course-hd"><span>我的课程表</span></div>
				<div class="course-bd">
					<ul>
						<li><h4>继续学习，努力学习</h4>
						  <p>正在学习-CSS</p>
						  </li>
					<ul>
						<li><h4>继续学习，努力学习</h4>
						  <p>正在学习-CSS</p>
					</li>
					<ul>
						<li><h4>继续学习，努力学习</h4>
						  <p>正在学习-CSS</p>
					</li>
					</ul>
					<a href="#" class="all">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner部分结束 -->
	<!-- goods部分开始 -->
	<div class="goods w">
		<h3>精品推荐</h3>
		<div class="goods-item">
			| <a href="#">jQuery</a>
			| <a href="#">jQuery</a>
			| <a href="#">jQuery</a>
			| <a href="#">jQuery</a>
			| <a href="#">jQuery</a>
		</div>
		<div class="mod">修改兴趣</div>
	</div>
	<!-- goods部分结束 -->
	<!-- box开始 -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!-- 此地方一定要清除浮动，务必务必务必 -->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
			</ul>
		</div>
		<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!-- 此地方一定要清除浮动，务必务必务必 -->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	</div>
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<!-- 此地方一定要清除浮动，务必务必务必 -->
		<div class="box-bd clearfix">
			<ul>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
				<li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li><li>
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span> • 1125人在学习</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- box结束 -->
	<!-- footer开始 -->
	<div class="footer">
		<div class="w">
			<div class="copyright">
				<img src="images/logo.png">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
					© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
				<a href="#" class="app">下载APP</a>
			</div>
			<div class="links">
				<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
				</dl>
			</div>
			<div class="links">
				<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
				</dl>
			</div>
			<div class="links">
				<dl>
						<dt>关于学成网</dt>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
				</dl>
			</div>
		</div>
	</div>
	<!-- footer结束 -->
</body>
</html>

CSS代码：

/*清除元素默认的内外边距*/
* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
	/*清除列表样式*/
}
button {
	border:none;
}
body {
	background-color: #f3f5f7;
}
.cleaefix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom:1;
}
/*版心1200.水平居中*/
.w {
	width: 1200px;
	margin: auto;
}
.header {
	height: 42px;
	/*background-color: pink;*/
	margin: 30px auto;

}
.logo {
	float: left;
}
.nav {
	float: left;
	margin-left: 60px;
}
.nav li {
	float: left;
}
.nav li a {
	display: inline-block;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	line-height: 40px;
	text-decoration: none;
	font-size: 18px;
	color: #050505;

}
/*鼠标经过链接才有底边框*/
.nav li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 20px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	padding-left: 20px;
	border: 1px solid #00a4ff;
	border-right: 0;
	color: #eddacf;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background:url(images/btn.png);
}
.user {
	height: 42px;
	line-height: 42px;
	float: left;
	margin-left: 30px;
	font-size: 14px;
	color: #666;
}
/*banner*/
.banner {
	height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
	float: left;
	width: 150px;
	height: 420px;
	padding: 0 20px;
	background: rgba(0,0,0,0.3);

}
.subnav li {
	height: 45px;
	line-height: 45px;

}
.subnav li a {
	font-size: 14px;
	text-decoration: none;
	color: #fff;
}
.subnav li a:hover {
	color: #00b4ff;
}
.subnav li span {
	float: right;
}
.course {
	float: right;
	width: 228px;
	height: 320px;
	margin-top: 50px;
	background-color: #fff;
}
.course-hd {
	height: 49px;
	background-color: #9bceea;
	font-size: 18px;
	text-align: center;
	line-height: 48px;
	color: #fff;
	font-weight: 700;
}
.course-bd {
		/*没有宽度的盒子，padding不会撑开盒子*/
	padding: 0 15px;
}
.course-bd ul {
	/*外边距塌陷问题
	margin-top: 10px;*/
	padding-top: 10px;
}
.course-bd li {
	/*行高等于高只能让单行文本居中*/
	height: 50px;
	border-bottom: 1px solid #ccc;
	margin-top: 10px;
}
.course-bd li h4 {
	font-size: 14px;
	color: #4e4e4e;
}
.course-bd li p {
	font-size: 12px;
	color: #a5a5a5;
}
.all {
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 10px;
	text-decoration: none;
	text-align: center;
	color: blue;
	line-height: 38px;
}
.all:hover {
	background-color: blue;
	color: #fff;
}
/*goods开始*/
.goods {
	height: 60px;
	
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	line-height: 60px;
	background-color: #fff;
}
.goods h3 {
	float: left;
	margin: 0 30px;
	font-size: 16px;
	color:#004aff;
}
.goods-item {
	float: left;
	color: #bfbfbf;
}
.goods-item a {
	font-size: 16px;
	color: #050505;
	margin: 0 30px;
	text-decoration: none;
}
.mod {
	float: right;
	font-size: 14px;
	color: #004aff;
	margin-right: 30px;
}
/*box开始*/
.box {
	margin-top: 15px;
}
.box-hd {
	height: 60px;
	line-height: 60px;
	background-color: #fff;
}
.box-hd h3 {
	float: left;
	font-size: 20px;
	color: #494949;
	/*让粗体不加粗*/
	font-weight: 400px;
}
.box-hd a {
	float: right;
	font-size: 12px;
	color: #a5a5a5;
	margin-right: 30px;
}
.box-bd {
	/*这个盒子不要给高度，因为内容不确定有多少*/
	/*boc-bd 宽度超过了版心1200 是可以的，就解决了问题*/
	width: 1215px;

	
}
.box-bd li {
	float: left;

	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-top: 15px;
	background-color: #fff;
	box-shadow: 2px 2px 2px rgba(0,0,0,.3);

}
.box-bd li img {
	width: 100%;
}
.box-bd li h4 {
	margin: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd li p {
	margin: 20px;
	font-size: 12px;
	color: #999;
}
.box-bd p span {
	color: orange;
}
/*footer*/
.footer {
	height: 385px;
	background-color: #fff;
	padding-top: 30px;
}
.footer .copyright {
	float: left;
}
.footer .copyright p {
	font-size: 12px;
	color: #666;
	margin: 20px 0 15px 0;
}
.footer .app {
	display: inline-block;
	width: 118px;
	height: 34px;
	border: 1px solid #00a4ff;
	line-height: 34px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	color: #00a4ff;
}
.footer .links {
	float: right;
}
.footer .links dt {
	height: 35px;
	font-size: 16px;
	color: #333;
}
.links dl {
	float: left;
	margin-left: 100px;
}
.links dd a {
	font-size: 12px;
	color: #333;
	text-decoration: none;
}
.links dd a:hover {
	color: blue;
}

突然记起：自定义列表用于：
![自定义列表的用途
增加固定定位：

.fixedbar {
	position: fixed;
	top: 0;
	left:50%;
	/*-600是版心的一半
	margin-left: -600px;*/
	/*-780是版心的一半再加上内容的宽度margin-left: -780px;*/
	/*再加10像素缝隙*/
	margin-left: -790px;
	width: 180px;
	height: 420px;
	background-color: pink;
}