第5章CSS3美化网页元素

最新推荐文章于 2020-11-02 22:45:44 发布

X_302lizhaohon

最新推荐文章于 2020-11-02 22:45:44 发布

阅读量743

点赞数

本文链接：https://blog.csdn.net/X_302lizhaohon/article/details/80786399

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍页面</title>
    <link rel="stylesheet" href="../css/北大青鸟课程介绍.css">
</head>
<body>
<div>
<img src="../image/title.gif"/>
<p><img src="../image/img_01.png"/></p>
<p id="zit">
    <span>逆向课程设计：</span>以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<br/>
    <span>模拟学员学习路线：</span>强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/>
    <span>互联网作为教学环境：</span>学员的日常教学和训练均在互联网线上进行<br/>
    <span>学习挡板监控网上学习效果：</span>每个学习阶段设置线上线下测试，严密监控学习效果<br/>
    <span>真实开发项目经验积累：</span>采用专业互联网企业提供的真实项目作为模拟开发<br/>
    </p>
<p><img src="../image/img_02.png"/></p>
<p id="lil">
    <span>【实用性】—— </span>以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术，<br/>
    <span>【权威性】—— </span>与来自百度等知名企业的专家联合开发<br/>
    <span>【专业性】—— </span>引进业内资深人才和典型行业开发项目<br/>
    <span>【真实性】—— </span>在互联网真实环境下进行教学和训练<br/>
    <span>【易学性】—— </span>在线培训模式，24小时专家在线解答疑难问题<br/>
    <span>【完整性】—— </span>利用SNS虚拟社区：学习、人脉双丰收<br/>
</p>
</div>
</body>
</html>

div{
    width: 600px;
    background: -moz-linear-gradient(#ECECEC,#FFFFED);
}
#zit{
    color: #5C9815;
}
#lil{
    color: #F26522;
}
#zit span:nth-of-type(1){
    color: #FFFFFF;
    background: #0D7114;
    /*文字行高*/
    line-height: 29px;
}
#zit span:nth-of-type(2){
    color: #FFFFFF;
    background: #5C9815;
    /*文字行高*/
    line-height: 29px;
}
#zit span:nth-of-type(3){
    color: #FFFFFF;
    background: #1F87CC;
    /*文字行高*/
    line-height: 29px;
}
#zit span:nth-of-type(4){
    color: #FFFFFF;
    background: #003580;
    /*文字行高*/
    line-height: 29px;
}
#zit span:nth-of-type(5){
    color: #FFFFFF;
    background: #000033;
    /*文字行高*/
    line-height: 29px;
}

#lil span:nth-of-type(1){
    color: #FFFFFF;
    background: #F26522;
    line-height: 29px;
}
#lil span:nth-of-type(2){
    color: #FFFFFF;
    background: brown;
    line-height: 29px;
}
#lil span:nth-of-type(3){
    color: #FFFFFF;
    background: hotpink;
    line-height: 29px;
}
#lil span:nth-of-type(4){
    color: #FFFFFF;
    background: firebrick;
    line-height: 29px;
}
#lil span:nth-of-type(5){
    color: #FFFFFF;
    background: blueviolet;
    line-height: 29px;
}
#lil span:nth-of-type(6){
    color: #FFFFFF;
    background: purple;
    line-height: 29px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇--席慕容</title>
    <link rel="stylesheet" href="../css/初相遇--席慕容.css">
</head>
<body>
<div>
    <h1><soan id="cxy">初相遇</soan><span id="xmr">
        &nbsp;&nbsp;&nbsp;&nbsp;文/席慕容</span></h1>

    <p><span class="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
    <p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，
        心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。
        <span class="xhz">胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。</p>
    <p class="qwe">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，
        落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>

div{
    /*宽度400px*/
    width: 400px;
    /*行高为22px*/
    line-height: 22px;
    /*正文字体大小*/
    font-size: 12px;
    /*首行缩进为2em*/
    text-indent: 2em;
    /*整体背景颜色*/
    background: -moz-linear-gradient(#CAEFFE,#FFFFED);
}
#cxy{
    /*字体颜色*/
    color: #1F87CC;
    /*字体大小*/
    font-size: 18px;
    /*字体加粗*/
    font-weight: bold;
    /*字体阴影*/
    text-shadow: black 1px 1px 0px;
}
h1{
    /*标题居中*/
    text-align: center;
}
#xmr{
    /*字体颜色*/
    color: #999999;
    /*字体大小*/
    font-size: 15px;
    /*字体阴影*/
    text-shadow: black 1px 1px 0px;
}
.mei{
    /*字体颜色*/
    color: darkorchid;
    /*字体大小*/
    font-size: 18px;
    /*字体加粗*/
    font-weight: bold;
    /*字体阴影*/
    text-shadow: #FFFFFF  1px  1px 0px;
}
.xhz{
    /*字体风格倾斜*/
    font-style: oblique;
    /*字体为蓝色*/
    color: blue;
    /*字体大小16px*/
    font-size: 16px;
}
.qwe {
    /*文字下划线*/
    text-decoration: underline;
    /*文字颜色*/
    color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝女装分类页面</title>
    <link rel="stylesheet" href="../css/淘宝女装分类.css">
</head>
<body>
<div>
   <img src="../image/dress01.png"/><span>夏季流行</span>
<hr/>
<p><a href="#"> 夏季新品 雪纺裙 短袖T 铅笔裤 短裤 短袖衬衫 小脚牛仔裤 开衫
    蕾丝/雪纺衫 韩版外套 小西装 中长款裙 </a></p>
<img src="../image/dress02.png"/><span>上装</span>
<hr/>
<p><a href="#">T恤 衬衫 针织衫 长袖T 韩版T 情侣衫 雪纺衬衫 韩版衬衫 防晒衣
    休闲套装 卫衣 背心/吊带</a></p>
<img src="../image/dress03.png"/><span>裙子</span>
<hr/>
<p><a href="#">连衣裙 半身裙 长裙 短袖裙 蕾丝连衣裙 长袖裙 无袖/背心裙 A字裙
    牛仔裙 半身中长裙 半身短裙 包臀裙 </a></p>
<img src="../image/dress04.png"/><span>裤子</span>
<hr/>
<p><a href="#">裤子 休闲裤 牛仔裤 打底裤 长裤 哈伦裤 阔腿裤 短裤/热裤 连体裤
    七/九分裤 牛仔短裤 西装裤 </a></p>
<img src="../image/dress05.png"/><span>其他女装</span>
<hr/>
<p><a href="#">胖M装 中老年 婚纱 礼服 旗袍 夜店 舞台装 唐装 职业装 全球购
    羊绒衫 毛衣 呢大衣 羽绒服 真皮皮衣  </a></p>
</div>
</body>
</html>

div{
    /*宽度400px*/
    width: 380px;
    /*行高为22px*/
    line-height:25px;
    /*正文字体大小*/
    font-size: 12px;
}
span{
    /*字体大小*/
    font-size: 18px;
    /*字体加粗*/
    font-weight: bold;
}
a{
    /*超链接无划线*/
    text-decoration: none;
    /*字体颜色*/
    color: #000;
}
a:hover{
    text-decoration: underline;
    color: orange;
}
/*文字图片垂直对齐*/
img,span{
    vertical-align: middle;
}

X_302lizhaohon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第5章CSS3美化网页元素

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;北大青鸟课程介绍页面&lt;/title&gt; &lt;link rel="stylesheet" href="
复制链接

扫一扫