#小薇学院#---碎碎念

4.20：第六节模拟报纸排版（1天）

太耗时间了，总感觉效率太低。很多排版功能都是float实现。

1. 图片两端设置半透明框

     div.content-left1 { 
      	float: left;  /*背景是在左边的，先浮动到左边*/
        position: relative;
       }
      div.left-img { 
        position: absolute;  /*左边的半透明框利用position 绝对定位*/
        opacity: 0.5;
        left: 0;
        top: 0;
      }
      div.right-img { 
        position: absolute;
        opacity: 0.5;
        right: 0;
        top: 0;
      }

2. 设置字体样式的先后顺序

font: italic bold 72px "黑体" ; /*一定要注意 font 样式的顺序*/

3. 设置首字母样式

      div.content2 .one:first-letter{   /*首字母的选择*/
        float: left;      如果没有float，会从大字的底部开始书写*/
      }

/*文字环绕图片，可以将图片设置为float:right; */

第七节：实现常见排版

4. 导航的表示（nav的列表，居右表示）

css：

nav ul {
	float: right;   /*列表右浮动*/
}
nav ul li {
	display: inline-block; /*设置为内联块，可以水平排列*/
	list-style: none;
	margin-right: 30px;
}

并且：

/*单独设置登入标签的颜色，并且去除悬停时的样式*/
nav ul li:last-child a {   /*最后一个li列表的 a元素*/
	color: #E74F4D;
}
nav ul li:last-child a:hover {
	border: none;
}

5. 列表居中表示

div.list ul{
	list-style: none;   /*列表没有前面的样式*/
	padding: 50px 0;
}
div.list li {
	border-left: 2px solid grey;
	height: 50px;
	width: 25%;      /*每个li宽度占据25%，*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;  /*box为border-box,包括了border、padding、content*/
	float: left;
	padding: 10px 68px;
}

第一个li没有边框：

div.list li.first_child {
	border: none;
}

6. 列表居中，鼠标移到列表上，能够出现相应的选项

html：

<div class="city_form">
	<ul>
		<li>
			<span>中国</span>
			<div class="city-list">
				<a href="#">美国</a>
				<a href="#">日本</a>
				<a href="#">英国</a>
				<a href="#">法国</a>
				<a href="#">德国</a>
			</div>
		</li>
		<li>
			<span>省份</span>
			<div class="city-list">
				<a href="#">广东</a>
				<a href="#">福建</a>
				<a href="#">浙江</a>
				<a href="#">上海市</a>
				<a href="#">北京市</a>
			</div>
		</li>
		<li>
			<span>城市</span>
		</li>
		<li id="input_btn">搜索</li>
	</ul>
</div>

css:

div.city_form ul li {
    position:relative;/*position定位 对于list有帮助*/
}
div.city-list {
	position: absolute;
	overflow: hidden;
	top: 35px;
	left: 0;
	background-color: #E3E3E4;
	width: 234px;
	display: none; /*列表默认隐藏起来*/
}
div.city-list a {
	display: block;  /*链接设置为块，并且设置宽度和高度*/
	width: 236px;
	height: 30px;
	text-align: left;
	padding-left: 25px;
	color: #323232;
	line-height: 30px;
	cursor: default;
	font: 12px "微软雅黑";
	text-decoration: none;
}
div.city-list a:hover {
	color: #fff;
	background-color: #BE4E48;
}
div.city_form ul li:hover .city-list {
	display: block; /*滑动过li列表后，显示为块*/
}

#小薇学院#---碎碎念

猜你喜欢