HTML5+CSS3创建⽹上书店界⾯
超链接的简单运⽤<!doctype html ><html ><head ><meta charset ="utf-8"><title >⽹上书店——⽕热开售【海量图书，欢迎选购】</title > <style > body {background : #e5ede2;} body,nav,ul,li { margin :0;padding : 0 } nav { background-color : #9194b5; height :50px ;/*导航栏为紫⾊，⾼度为50px ，nav 是块级元素*/ } .menu,footer { height :50px ;width :900px ;margin :0 auto ; }/*列表为900px 宽，⾼度与导航背景⼀致*/ #nav_top ul li { font-size : 1.2em ;font-weight : 700;float :left ; padding-left : 3px ;margin :18px 25px 0 0; /*空格表⽰选择了nav_top 下的ul 下的li ⾥的内容， 以及ul 和li 都是块级元素。有12个li 就是有12个⼩盒⼦， padding-left 就是把li 盒⼦内部左边撑⼤3px 。 margin 就是12个li 盒⼦与外⾯的ul 盒⼦之间的距离*/ color :#fff ;list-style : none ;text-shadow : 2px 0 3px #66687f ; } #nav_top #nav_n { font-size :1.8em ;margin :10px 30px 0 0; }/*如果不写前⾯的#nav_top 样式就不起作⽤ （？）*/ #nav_top ul li:hover { color :#f5f5f5;text-shadow : 1px 0px 2px #f7f7f7; } #img1{ height : 430px ;width :900px ; margin :0 auto 20px auto ; border :2px solid #fff ;text-align : center ; }/*这⾥是设置div 盒⼦的宽⾼*/ .zhong { color :#fff ;border-radius : 60px 60px 0 60px ; background-color : #606184;font-size : 1.2em ; } #main_bt h1{ text-align : center ;color : #606184; } #tubiao { width :900px ;height :700px ;background-color : #fff ; border-radius : 40px ;border :#606184 dotted 2px ; margin : 0 0 38px 156px ; }/*设置ul 的宽⾼,margin 设置ul 居中*/ #tubiao li { display : inline-block ;widt
h :210px ;height : 300px ; margin : 25px 40px ; } #tubiao li a img { display : block ;width : 200px ;height : 200px ; }/*设置图⽚的⼤⼩，才能保证全部放进ul 盒⼦⾥*/ #tubiao a { text-align : center ;text-decoration : none ;color :#505050; }/*超链接居中，去掉下划线*/ #tubiao li>p { text-indent : 3em ;font-size : 0.8em ; line-height : 1em ;color :#303048; }/*⼦选择器，只选择他的⼉⼦元素，li 的⼉⼦元素有a ，p ，p 。a ⾥⾯的 p 和img 是li 的孙⼦元素。*/ #tubiao li>p span { font-size : 1.5em ;color :#9f0000; }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
47
48
49
50
51
52
53
54
55
56
<nav id ="nav_top "> <div class ="menu "> <ul > <li id ="nav_n "><em >⽹上书店</em ></li > <li >⽂学</li ><li >哲学</li > <li >历史</li ><li >⼩说</li > <li >少⼉</li ><li >教辅</li > <li >⽹络</li ><li >青春</li > <li >科技</li ><li >艺术</li > <li >管理</li > </ul > </div > </nav > <div id ="img1"> <img src ="images/images3/main_p.jpg " alt ="图⽚" width ="900px "/> </div > <div id ="main_bt "> <h1><span class ="zhong "> ；重 </span >磅推荐</h1> <ul id ="tubiao "> <li ><a href ="images/images3/b_huozhe.jpg " target ="_blank "> <img src ="images/images3/b_huozhe.jpg " alt ="活着"/> <p >《活着》</p > </a ><!--img 只相当于⼀个显⽰的图标，点开之后是链接⾥的内容--> <p >余华著</p > <p ><span >¥14.00</span > <del >¥28.00</del ></p > </li > <li ><a href ="images/images3/b_hlsqdaq.jpg " target ="_blank "> <img src ="images/images3/b_hlsqdaq.jpg " alt ="时期的爱情"/> <p >《时期的爱情》</p > </a > <p >加西亚·马尔克斯著</p > <p ><span >¥60.00</span > <del >¥69.00</del ></p > </li > <li ><a href ="images/images3/b_bngd.jp
g " target ="_blank "> <img src ="images/images3/b_bngd.jpg " alt ="百年孤独"/> <p >《百年孤独》</p > </a > <p >加西亚·马尔克斯著</p > <p ><span >¥35.00</span > <del >¥50.00</del ></p > </li > <li ><a href ="images/images3/b_ylylbs.jpg " target ="_blank "> <img src ="images/images3/b_ylylbs.jpg " alt ="⽉亮与六便⼠"/> <p >《⽉亮与六便⼠》</p > </a > <p >⽑姆著</p > <p ><span >¥35.00</span > <del >¥39.00</del ></p > </li > <li ><a href ="images/images3/b_jianai.jpg " target ="_blank "> <img src ="images/images3/b_jianai.jpg " alt ="简爱"/> <p >《简·爱》</p > </a > <p >夏洛蒂勃朗特著</p > <p ><span >¥25.00</span > <del >¥29.00</del ></p > </li > <li ><a href ="images/images3/b_byx.jpg " target ="_blank "> <img src ="images/images3/b_byx.jpg " alt ="⽩夜⾏"/> <p >《⽩夜⾏》</p > </a > <p >东野圭吾著</p > <p ><span >¥29.00</span > <del >¥39.00</del ></p > </li >60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
html导航源码85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
跟着书上案例看源代码⼀起做的，⽤的还不熟，注释部分有⾃⼰的理解以及没解决的疑问。涉及到了还没学到的选择器问题，以及让⼈头疼的盒模型问题。坚持打卡，加油。 <p >万事通⽹上书店运营⼯作室</p > </footer ></body ></html >
125
126
127
128
129
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论