CSS入门２

其他 2019-01-21 11:54:33 阅读次数: 0

用列表制作菜单

ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用列表制作菜单</title>
    <link rel="stylesheet" href="../CSS/用列表制作菜单.css">
</head>
<body>
<ul class="menu">
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
</ul>
</body>
</html>

ｃｓｓ文件

.menu{
    width: 694px;
    height: 50px;
    /*color: pink;*/
    background-color: red;
    list-style: none;/*去掉小圆点*/
    margin: 50px auto 0;
    padding: 0;
}
.menu li{
    width: 98px;
    height: 48px;
    border: 1px solid gold;
    background-color: white;
    /*转换成行内快*/
    float: left;
    margin-left:-1px ;
}
.menu li a{
    /*background-color: gold;*/
    display: block;
    width: 98px;
    height: 48px;
    text-align: center;/*文字水平居中*/
    line-height: 48px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'AR PL UMing CN';
}

.menu li a:hover{
    color: white;
    background-color: black;
}/*鼠标放上去之后，文字变成白色，背景变成黑色*/

在这里插入图片描述

定位布局

ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/定位布局.css">
</head>
<body>
    <div class="con">
        <div class="box">5</div>
    </div>
</body>
</html>

ＣＳＳ文件

.con{
    width: 100px;
    height: 100px;
    background-color: gold;
    margin: 50px auto 0;
    position: relative;
    border-radius: 14px;
}

.box{
    width: 28px;
    height: 28px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 28px;
    position: absolute;
    left: 86px;
    bottom: 86px;
    border-radius: 14px;
}

外面嵌套的盒子用相对定位，里面嵌套的盒子用绝对定位
在这里插入图片描述

固定在顶部的菜单水平居中以及弹框

设置一个菜单文字块

<div class="menu">菜单文字</div>

在ｃｓｓ文件里将ｐｏｓｉｔｉｏｎ设置成ｆｉｘｅｄ（固定菜单），用left: 50%; margin-left: -480px;来将菜单移到屏幕中间

设置弹框

<div class="popcon">
        <div class="popup">
        <h2>弹框</h2>
        </div>

        <div class="mask"></div>
    </div>

popcon样式是设置以后用ｊｓ来控制是否弹出弹框的。
ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../CSS/固定在顶部的水平居中的菜单.css">
</head>
<body>
    <div class="menu">菜单文字</div>
    <div class="popcon">
        <div class="popup">
        <h2>弹框</h2>
        </div>

        <div class="mask"></div>
    </div>

    <p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
    <p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />
<p>网页文字</p>
    <br />
    <br />
    <br /><br /><br /><br />

</body>
</html>

ｃｓｓ文件

.menu{
    height: 80px;
    background-color: gold;
    position: fixed;/*固定定位*/
    width: 960px;
    top: 0px;
    left: 50%;
    margin-left: -480px;
}
p{
    text-align: center;
}

.popup{
    width: 500px;
    height: 300px;
    border: 1px solid black;
    background-color: gold;
    color: white;
    position: fixed;
    left: 50%;
    margin-left: -251px;
    top: 50%;
    margin-top: -150px;
    z-index: 9999;
}

.popup h2{
    background-color: gold;
    margin: 10px;
    height: 40px;

}

.mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    left: 0;
    top: 0;
    opacity: 0.5;/*设置透明度０*/
    z-index: 9998;
}

.popcon{
    display: none;
}

在这里插入图片描述如果ｊｓ将ｐｏｐｃｏｎ的ｄｉｓｐｌａｙ属性设置成ｂｌｏｃｋ，则就会有弹窗出来
在这里插入图片描述

ｂａｃｋｇｒｏｕｎｄ属性

添加图片，并且使文字可以添加到图片上。
ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blackgroud属性</title>
    <link rel="stylesheet" href="../CSS/blackgroud属性.css">
</head>
<body>
    <div class="box">
        <img src="../images/new.png" alt="h5">
        添加文字
    </div>
</body>
</html>

ｃｓｓ文件

.box{
    width: 400px;
    height: 200px;
    border: 10px solid black;
    margin: 50px auto 0;

    background-image: url("../images/new.png");
    background-repeat: no-repeat;
	
    background-position: left bottom;
    background-color: gold;
}

在这里插入图片描述# 制作雪碧图
ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <link rel="stylesheet" href="../CSS/雪碧图.css">
</head>
<body>
    <ul class="list">
        <li>美人鱼</li>
        <li class="icon02">美人鱼</li>
        <li class="icon03">美人鱼</li>
        <li class="icon04">美人鱼</li>
        <li class="icon05">美人鱼</li>
    </ul>
</body>
</html>

ｃｓｓ文件

.list{
    list-style: none;/*去掉ｌｉｓｔ的小圆点*/
    margin: 50px auto 0;
    width: 300px;
    height: 305px;
    padding: 0px;
    background: gold;
}

.list li{
    height: 60px;
    border:1px dotted red;
    line-height: 60px;
    text-indent: 50px;/*首行缩进，给图片空出位置*/
    background: url("../images/bg01.png") left 10px no-repeat cyan;
}

.list .icon02{
    background-position: 0px -70px;
}

.list .icon03{
    background-position: 0px -150px;
}

.list .icon04{
    background-position: 0px -235px;
}

.list .icon05{
    background-position: 0px -315px;
}

先去掉一些ｌｉｓｔ的样式，比如小圆点，再把文字缩进。最后针对每一个ｌｉ，移动他们的ｂａｃｋｇｒｏｕｎｄ—ｐｏｓｉｔｉｏｎ
在这里插入图片描述

特征布局：翻页

ｈｔｍｌ文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特征布局01：翻页</title>
    <link rel="stylesheet" href="../CSS/特征布局01：翻页.css">
</head>
<body>
<ul class="pagenation">
    <li><a href="#">上一页</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><span>...</span></li>
    <li><a href="#">17</a></li>
    <li><a href="#">18</a></li>
    <li><a href="#">19</a></li>
    <li><a href="#">20</a></li>
    <li><a href="#">下一页</a></li>
</ul>
</body>
</html>

css文件

.pagenation{
    list-style: none;
    margin:50px auto 0;
    padding: 0;
    width: 600px;
    height: 40px;
    border: 1px solid gray;
    font-size: 0;
    text-align: center ;

}

.pagenation li{
    display: inline-block;/*让他们在一行显示*/
    height: 26px;
    background-color: gold;
    /*这个时候如果没有设置父级和子集的font-size，每个li之间会有空格
    */
    font-size: 12px;
   /* margin-top: 7px;*/
    margin: 7px 5px 0;/*
    每个li上面是7，左右是5，下面是0*/

}

.pagenation li a {
    display: block;/*将每个a转换成行内块*/
    text-decoration: none;
    line-height: 26px;
    padding: 0 10px 0;
    font:normal 12px/26px 'Micrsoft YaHei';
    color: red;
}

在这里插入图片描述

特征布局：导航条

ｈｔｍｌ问价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特征布局02:导航条</title>
    <link rel="stylesheet" href="../CSS/特征布局02:导航条.css">
</head>
<body>
<ul class="menu">
    <li><a href="#">网站建设</a></li>
    <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
     <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
     <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
     <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
     <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
     <li><span>|</span></li>
    <li><a href="#">网站建设</a></li>
</ul>

<ul class="menu02">
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li class="new"></li>
</ul>
</body>
</html>

ｃｓｓ文件

.menu{
    list-style:none;
    width: 958px;
    padding: 0;
    margin: 50px auto 0;
    height: 40px;
    border: 1px solid black;
    text-align: center;
}

.menu li{
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    height: 40px;
}

.menu li a {
    text-decoration: none;
    display: block;
    height: 40px;
    line-height: 40px;
    font: normal 14px/40px 'Micrsoft YaHei';
    color: black;
}

.menu li a:hover{
    color: red;
}

.menu li span{
    display: block;
    height: 40px;
    font: normal 14px/40px 'Micrsoft YaHei';
    margin: 0 20px;
}

.menu02{
    width: 960px;
    height: 40px;
    list-style-type: none;
    background-color: #55a8ea;
    margin: 50px auto 0;
    padding: 0;
    position: relative;
}

.menu02 li{
    /*display: inline-block;*/
    width: 100px;
    height: 40px;
    float: left;
    /*background-color: red;*/
}

.menu02 li a {
    /*background-color: black;*/
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    color: white;
}
.menu02 li a:hover{
    color: black;
}

.menu02 .new{
    width: 33px;
    height: 20px;
    background: url("../images/new.png") no-repeat;
    position: absolute;
    left: 100px;
    top:20px;
}

在这里插入图片描述

ａｕｔｈｏｒ：ｓｐｅｃｙｕｅ＠mail.ustc.edu.cn
github:https://github.com/zhangyuespec/CSS

猜你喜欢

转载自blog.csdn.net/qq_34788903/article/details/85141950
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022