盒子模型代码示例,新手攥写,生搬硬套

1年前 (2017-07-14) dyfwind PHP分享 0评论 已收录 529℃

优酷牛人盒子模型

本人懒得去找图片,参照样式,做了一个造型和优酷牛人界面类似的,文章后面会附上牛人原题的代码。自认为自己写的很傻,新手,看书看视频,自己看着样子写的,体谅。

其中,更多选项类型的部分,可以将<li>换成<span>,效果好,且容易调试,这是新手的我自己硬改的。

下图采用的是一个div,多个ul,一个ul下四个li;由于第一行公益部分未使用<span>,导致每个ul的第四个li,需要单独设置样式,没别的意思,就是想说,样式这个东西,新手硬凑也能凑出来。。。

顺带说下,爱奇艺优酷类似功能,采取的是一行是一个大的div,每个专题是一个div中间包含多个ul,然后一行并行4个相同的div。语言能力有限,可以自己查看。

divcss类似优酷牛人类型

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style type="text/css">
        div{
	width:700px;
	height:850px;
	border:1px solid black;
	}
	.ul1{
		width:600px;
		height:200px;
		/*完成后删除边框*/
		list-style-type:none;
		margin:0 auto;
		/*border:1px solid red;*/			
		padding:2px;
		margin-top:5px;
	}
	.ul1li1{
		float:left;
		margin:5px 0 0 10px;
	}
	.ul1li2{
		float:right;
		margin:5px 10px 0 0;
	}
	.ul1li{
		margin:27px 20px 0 10px;
	}
	li{
		float:left;
		/*完成后删除边框*/
		/*border:1px solid red;*/
		margin:50px 20px 0 10px;
		text-align:center;
		line-height:100%;			
	}
	a:link{
		color:blue;
		font-size:large;
		font-family:"宋体";
		text-decoration:none;
	}
	a:hover{
		color:red;
	}
 
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 <body>
	<div>
	<ul class="ul1">
		<li class="ul1li1"><a href="#">公益</a></li>
		<li class="ul1li2">更多公益</li>	
		<li><img src="divulli.jpg"><br><a href="http://www.baidu.com/" >ul1.1</a></li>
		<li><img src="divulli.jpg"><br><a href="http://www.baidu.com/" >ul1.2</a></li>
		<li><img src="divulli.jpg"><br><a href="http://www.baidu.com/" >ul1.3</a></li>
		<li class="ul1li"><img src="divulli.jpg"><br><a href="http://www.baidu.com/" class="ul1li">ul1.4</a></li>
	</ul>
	<ul class="ul1">
		<li class="ul1li1">娱乐</li>
		<li class="ul1li2">更多娱乐</li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.1</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.2</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.3</a></li>
		<li class="ul1li"><img src="divulli.jpg"><br><a href="#" class="ul1li">ul1.4</a></li>
	</ul>
	<ul class="ul1">
		<li class="ul1li1">音乐</li>
		<li class="ul1li2">更多音乐</li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.1</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.2</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.3</a></li>
		<li class="ul1li"><img src="divulli.jpg"><br><a href="#" class="ul1li">ul1.4</a></li>
	</ul>
	<ul class="ul1">
		<li class="ul1li1">电影</li>
		<li class="ul1li2">更多电影</li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.1</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.2</a></li>
		<li><img src="divulli.jpg"><br><a href="#" >ul1.3</a></li>
		<li class="ul1li"><img src="divulli.jpg"><br><a href="#">ul1.4</a></li>
	</ul>
	</div>
 </body>

css1


css3

附:优酷盒子模型

对应原图如下:

实现代码:

 

博主

这货来去如风,什么鬼都没留下!!!

相关推荐

嗨、骚年、快来消灭0回复。