樂
喜
安
平

HTML5-04

例1-导航菜单：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>导航菜单</title>
 6         <link rel="stylesheet" type="text/css" href="css/zixuereset.css" />
 7         <!-- <link rel="stylesheet" type="text/css" href="css/reset.css"/> -->
 8         <link rel="stylesheet" type="text/css" href="css/nav.css" />
 9     </head>
10     <body>
11         <ul>
12             <div>
13                 <li><a href="#">首页</a></li>
14                 <li><a href="#">知识库</a></li>
15                 <li><a href="#">论坛</a></li>
16                 <li><a href="#">学员问答</a></li>
17                 <li><a href="#">圈子</a></li>
18                 <li><a href="#">实时课堂</a></li>
19                 <li><a href="#">客户端下载</a></li>
20                 <li><a href="#">帮助中心</a></li>
21             </div>
22         </ul>
23     </body>
24 </html>

两个css：一个去除默认样式，一个更改需要的样式

 1 /* 并集选择器，去除默认样式 */
 2 html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,div{
 3     margin: 0;
 4     /* 去掉外边距 */
 5     padding: 0;
 6     /* 去掉内边距 */
 7 }
 8 ul{
 9     list-style: none;
10     /* 去掉无序列表左边的点 */
11 }
12 a{
13     font-size: 12px;
14     /* 设置超链接默认字号 */
15     text-decoration: none;
16     /* 去掉超链接的下划线 */
17     color: black;
18     /* 设置默认字体颜色 */
19 }
zixuereset.css
 1 *{
 2     /* *代表所有标签 */
 3     /* border: 1px solid red; */
 4 }
 5 div{
 6     text-align: center;
 7 }
 8 li{
 9     display: inline-block;
10     margin: 0 -3px;
11     /* 回怼两个横着的li之间的外边距 */
12 }
13 ul{
14     width: 610px;
15     /* 设置ul的宽度 */
16     margin: 10px auto ;
17     /* 设置ul上下外边距 */
18     background-color: #000000;
19 }
20 a{
21     font-size: 14px;
22     padding: 0 14px;
23     /* 设置a的内边距 */
24     /* background-color: black; */
25     /* 给ul设置背景色即可,a和li不需要再设置 */
26     color: white;
27     font-weight: bolder;
28     /* 字体设置:加粗 */
29     display: inline-block;
30     height: 34px;
31     line-height: 34px;
32 }
33 a:hover{
34     /* 设置当光标移至超链接标签时的状态 */
35     background-color: red;
36     color: #efefef;
37 }

(以后zixuereset.css代码就不放上去了)

2.相对定位与绝对定位：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="css/abs.css"/>
 7     </head>
 8     <body>
 9         <div id="outter">
10             <div id="inner">
11                 
12             </div>
13         </div>
14     </body>
15 </html>

css：

 1 #outter{
 2     border: 5px solid red;
 3     width: 200px;
 4     height: 200px;
 5     position: relative;
 6     /* 相对定位 */
 7     top: 100px;
 8 }
 9 #inner{
10     border: 5px solid green;
11     width: 100px;
12     height: 100px;
13     position: absolute;
14     /* 绝对定位-相对于static默认定位以外的第一个父元素进行定位 */
15     /* 在这里如果取消outter的相对定位,则相对于body进行定位 */
16     left: 30px;
17     /* 里层div距离外层div左边界的距离 */
18     top: 30px;
19     /* 里层div距离waicengdiv上边界的距离 */
20 }

2.1另一个绝对定位：

1 position: fixed;
2     /* 绝对定位-相对于浏览器窗口的位置 */
3     top: 100px;
4     /* 与浏览器窗口上边界距离 */
5     left: 100px;
6     /* 与浏览器窗口左边界距离 */
7 }

*3.购买商品

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购买商品</title>
        <link rel="stylesheet" type="text/css" href="css/zixuereset.css" />
        <link rel="stylesheet" type="text/css" href="css/goumaishangpin.css" />
    </head>
    <body>
        <!-- 外层div -->
        <div id="main">
            <!-- 底层图片 -->
            <div id="product">
                <img src="img/pic1.jpg">
            </div>
            <!-- 中间遮罩div -->
            <div id="middle">
                
            </div>
            <!-- 上层ul(包含li) -->
            <ul id="buy">
                <!-- 顶层a -->
                <li><a href="#"></a>立即购买</li>
                <li><a href="#"></a>加入购物车</li>
                <li><a href="#"></a>收藏</li>
            </ul>
        </div>
    </body>
</html>

css

 1 * {
 2     /* border: 1px solid red; */
 3 }
 4 
 5 /* 底层图片的设置 */
 6 #product {
 7     height: 320px;
 8     width: 320px;
 9     position: relative;
10     /* 设置相对定位 */
11     z-index: -1;
12     /* 设置层：底层 */
13 }
14 
15 /* 中间遮罩层的设置 */
16 #middle {
17     height: 320px;
18     width: 320px;
19     background-color: gray;
20     opacity: 0.5;
21     /* 设置透明度 */
22     position: relative;
23     /* 相对定位 */
24     z-index: 0;
25     /* 设置层：中间层 */
26     top: -320px;
27     /* 将遮罩层移至底层图片所在位置 */
28     display: none
29     /* none：此元素不会被显示 */
30 }
31 
32 ul {
33     position: relative;
34     /* 相对定位 */
35     z-index: 1;
36     /* 设置层:上层 */
37     padding: 50px 0 0 60px;
38     /* 320-(60*3-10*4)/2 */
39     top: -640px;
40     display: none;
41     /* 此元素不被显示 */
42 }
43 
44 li {
45     width: 200px;
46     height: 60px;
47     text-align: center;
48     line-height: 60px;
49     font-size: 20px;
50     background-color: yellow;
51     margin: 10px 0;
52 }
53 
54 #main:hover #middle,
55 #buy {
56     /* 为main的一些后代设置鼠标悬停样式 */
57     /* 当鼠标悬停时,中间遮罩区和购买区显现 */
58     display: block;
59     /* block:此元素显示为块级元素,元素前后带有换行符 */
60 }
61 
62 #main {
63     width: 320px;
64     height: 320px;
65 }
66 
67 li:hover {
68     /* border: 1px solid black; */
69 }
70 
71 /*  */
72 li a {
73     /* border: 1px solid black; */
74     display: inline-block;
75     width: 200px;
76     height: 60px;
77     position: absolute;
78     /* a在li中，li中显示文本内容且位置已设好，故使用绝对定位 */
79     z-index: 2;
80     /* 设置为顶层 */
81     left: 60px;
82 }

 

posted @ 2021-07-01 21:54  喵酱爱吃鱼  阅读(70)  评论(0)  编辑  收藏  举报