第十篇

最新推荐文章于 2023-07-07 10:57:57 发布

a530609250

最新推荐文章于 2023-07-07 10:57:57 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/a530609250/article/details/86906636

版权

CSS3可用来美化网页，用CSS3美化网页文本具有如下意义：
1.有效传递页面信息。
2.使用CSS样式美化过的页面，使页面美观，吸引用户。
3.可以很好的突出页面的主体内容，使用户第一眼可以看到页面的主要内容。
4.具有良好的用户体验。
<span>标签，<span>标签是用来组合HTML文档中的行内元素的，没有固定的格式，只有用CSS样式，才会产生视觉上的变化。
字体样式：
font-family 设置字体
font-size 字体大小
font-syle 这个属性有三种可选：normal \italic（斜体）\oblique(斜体）
font-weight normal\bold
color 设置字体颜色

text-decoration:
—underline 下划线
—overline 上划线
—line-through 删除线
—blink 闪烁

排版网页文本：
使用

标签（也可以是其他容器），左右（相当于缩进）、段前段后的空白，都可以用margin或padding。比如：

p{
margin: 18px 6px 6px 18px;/分别是上、右、下、左，十二点开始的顺时针方向/
margin:18px 6px;/表示上下为18，左右为6/
margin:1px 2px 3px;/表示上为1px，下为6px,左右为2px/
}

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：

p{
text-indent: 2em; /em是相对单位，2em即现在一个字大小的两倍/
}

文本颜色：RGB通常使用16进制，如#ffffff，RGBA增加了透明度。

文本阴影：
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。

超链接伪类：
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}

标签

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

背景属性：background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少

以下代码可以表述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        h3{
            font-size: 18px;
            font-weight: bold;
            text-indent: 40px;
            height: 40px;
            line-height: 40px;

        }
        li{
            list-style: none;
        }

        .dress01{
            background: url("img/dress01.png")0px 0px no-repeat;
        }
        .dressList a {
            color: #000;
            text-decoration: none;
        }

        .dressList a:hover {
            color: #F60;
            text-decoration: underline;
        }
        .dress02{
            background: url("img/dress02.png")0px 0px no-repeat;
        }
        .dress03{
            background: url("img/dress03.png")0px 0px no-repeat;
        }
        .dress04{
            background: url("img/dress04.png")0px 0px no-repeat;
        }
        .dress05{
            background: url("img/dress05.png")0px 0px no-repeat;
        }

    </style>
</head>
<body>
<div id="dress">
    <ul>
        <li>
        <h3 class="dress01">夏季流行</h3>
        <hr>
            <div class="dressList">
                <a href="#">夏季新品</a>
                <a href="#">雪纺裙</a>
                <a href="#">短袖T</a>
                <a href="#">铅笔裤</a>
                <a href="#">短裤</a>
                <a href="#">短袖衬衫</a>
                <a href="#">小脚牛仔裤</a>
                <a href="#">开衫</a>
                <a href="#">蕾丝/雪纺衫</a>
                <a href="#">韩版外套</a>
                <a href="#">小西装</a>
                <a href="#">中长款裙</a>
            </div>
        </li>
        <li>
            <h3 class="dress02">上装</h3>
            <hr>
            <div class="dressList">
                <a href="#">T恤</a>
                <a href="#">衬衫</a>
                <a href="#">针织衫</a>
                <a href="#">长袖T</a>
                <a href="#">韩版T</a>
                <a href="#">情侣衫</a>
                <a href="#">雪纺衬衫</a>
                <a href="#">韩版衬衫</a>
                <a href="#">防晒衣</a>
                <a href="#">休闲套装</a>
                <a href="#">卫衣</a>
                <a href="#">背心/吊带</a>
            </div>
        </li>
        <li>
            <h3 class="dress03">裙子</h3>
            <hr>
            <div class="dressList">
                <a href="#">连衣裙</a>
                <a href="#">半身裙</a>
                <a href="#">长裙</a>
                <a href="#">短袖裙</a>
                <a href="#">蕾丝连衣裙</a>
                <a href="#">长袖裙</a>
                <a href="#">无袖/背心裙</a>
                <a href="#">A字裙</a>
                <a href="#">牛仔裙</a>
                <a href="#">半身中长裙</a>
                <a href="#">半身短裙</a>
                <a href="#">包臀裙</a>
            </div>
        </li>
        <li>
            <h3 class="dress04">裤子</h3>
            <hr>
            <div class="dressList">
                <a href="#">裤子</a>
                <a href="#">休闲裤</a>
                <a href="#">牛仔裤</a>
                <a href="#">打底裤</a>
                <a href="#">长裤</a>
                <a href="#">哈伦裤</a>
                <a href="#">阔腿裤</a>
                <a href="#">短裤/热裤</a>
                <a href="#">连体裤</a>
                <a href="#">七/九分裤</a>
                <a href="#">牛仔短裤</a>
                <a href="#">西装裤</a>
            </div>
        </li>
        <li>
            <h3 class="dress05">其他女装</h3>
            <hr>
            <div class="dressList">
                <a href="#">胖M装</a>
                <a href="#">中老年</a>
                <a href="#">婚纱</a>
                <a href="#">礼服</a>
                <a href="#">旗袍</a>
                <a href="#">夜店</a>
                <a href="#">舞台装</a>
                <a href="#">唐装</a>
                <a href="#">职业装</a>
                <a href="#">全球购</a>
                <a href="#">羊绒衫</a>
                <a href="#">毛衣</a>
                <a href="#">呢大衣</a>
                <a href="#">羽绒服</a>
                <a href="#">真皮皮衣</a>
            </div>
        </li>





    </ul>
</div>




</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style rel="stylesheet" type="text/css">
        #asd{
            width: 600px;
            background-color: #eeeeee;
            background: linear-gradient(to bottom,#ECECEC,#FFFFED);
        }#asd span {
             color:#ffffff;
         }
        .qwe{
            line-height: 30px;
            color:#5c9815;
        }
        .qwe span:nth-of-type(1){
            background-color: #005952;;
        }
        .qwe span:nth-of-type(2){
            background-color: #007236;
        }
        .qwe span:nth-of-type(3){
            background-color: #008bbf;
        }
        .qwe span:nth-of-type(4){
            background-color: #0066b3;
        }
        .qwe span:nth-of-type(5){
            background-color: #002561;
        }
        .zxc{
            line-height: 30px;
            color: #F26522;
        }
        .zxc span:nth-of-type(1){
            background-color: #f36f21;
        }
        .zxc span:nth-of-type(2){
            background-color: #bb131a;
        }
        .zxc span:nth-of-type(3){
            background-color: #d73765;
        }
        .zxc span:nth-of-type(4){
            background-color: #a70532;
        }
        .zxc span:nth-of-type(5){
            background-color: #553171;
        }
        .zxc span:nth-of-type(6){
            background-color: #4f1268;
        }
    </style>
</head>
<body>
<div id="asd">
    <h2><img src="img/title.gif"></h2>
    <h3><img src="img/img_01.png"></h3>
    <div class="qwe">
        <span>逆向课程设计：</span>以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<br>
        <span>模拟学员学习路线：</span>强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br>
        <span>互联网作为教学环境： </span>学员的日常教学和训练均在互联网线上进行<br>
        <span>学习挡板监控网上学习效果：</span>每个学习阶段设置线上线下测试，严密监控学习效果<br>
        <span>真实开发项目经验积累：</span>采用专业互联网企业提供的真实项目作为模拟开发<br>
    </div>
    <h3><img src="img/img_02.png"></h3>
    <div class="zxc">
        <span>【实用性】——</span> 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br>
        <span>【权威性】—— </span>与来自百度等知名企业的专家联合开发<br>
        <span>【专业性】——  </span>引进业内资深人才和典型行业开发项目<br>
        <span>【真实性】—— </span>在互联网真实环境下进行教学和训练<br>
        <span>【易学性】——</span>在线培训模式，24小时专家在线解答疑难问题<br>
        <span>【完整性】—— </span>利用SNS虚拟社区：学习、人脉双丰收<br>
    </div>
</div>
</body>
</html>

a530609250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十篇

CSS3可用来美化网页，用CSS3美化网页文本具有如下意义：1.有效传递页面信息。2.使用CSS样式美化过的页面，使页面美观，吸引用户。3.可以很好的突出页面的主体内容，使用户第一眼可以看到页面的主要内容。4.具有良好的用户体验。标签，标签是用来组合HTML文档中的行内元素的，没有固定的格式，只有用CSS样式，才会产生视觉上的变化。字体样式：font-family 设置字体font...
复制链接

扫一扫