【CSS】美化网页元素+盒子模型

Cx陈

已于 2022-08-01 10:02:23 修改

阅读量566

点赞数

分类专栏：前端文章标签：前端 html

于 2022-08-01 09:57:42 首次发布

本文链接：https://blog.csdn.net/m0_68808168/article/details/126094934

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、美化网页元素
2、盒子模型

1、美化网页元素

1.1、为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来

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

    <style> 
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>

1.2、字体样式

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

<!--
font-family：字体
font-size：字体大小
font-weight:字体粗细
-->
    <style>

        body{
            font-family: 行书;
            color:palevioletred;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

</head>
<body>
<h1>人物介绍</h1>
<p class="p1">
    吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。
</p>

<p >
    1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员 [1-2]  。<br>
    2001年，主演文艺片《游园惊梦》 [3]  。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角 [4]  。<br>
    2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第41届台湾电影金马奖最佳男配角奖 [5]  。<br>
    2005年，凭借动作片《旺角黑夜》首次提名第24届香港电影金像奖最佳男主角 [6]  。<br>
</p>
<p>
    2006年，执导了个人电影处女作《四大天王》，凭该片获得第26届香港电影金像奖新晋导演奖 [7]  。<br>
    2007年，在犯罪片《门徒》中饰演阿力 [8]  。2010年，担任监制并主演了爱情片《如梦》，凭该片第二次提名第46届台湾电影金马奖最佳男主角 [10]  。<br>
    2011年，在爱情片《单身男女》中饰演建筑师方启宏 [11]  。2012年，在警匪片《窃听风云2》中饰演司马念祖 [38]  。2014年，主演犯罪片《魔警》，<br>
    凭该片第二次提名第34届香港电影金像奖最佳男主角 [12]  ；同年，主演个人首部美剧《荒原》系列 [13]  。2015年，主演励志片《滚蛋吧！肿瘤君》。2016年，在奇幻片《魔兽》中饰演古尔丹 [14]  。<br>
    2018年，吴彦祖参与设计的作品“木兰坊”入围了英国皇家建筑师学会奖 [87]  ；同年，在动作片《古墓丽影：源起之战》中饰演陆仁 [15]  。2020年，在警匪片《除暴》中饰演张隼 [16]  。<br>

</p>
</body>
</html>

1.2、文本样式

颜色 color
文本对齐的方式 text-align：center
首行缩进 text-indent：2px
行高 line-height
装饰 text-decoration：underline
文本图片水平对齐 vertical-align：middle

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

    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        p{
            text-indent: 2em;
        }
        .p1{
            background: gray;
            height: 300px;
            line-height: 50px;
        }
    </style>

</head>
<body>
<h1>人物介绍</h1>
<p>
    吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。
</p>

<p >
    1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员 [1-2]  。
    2001年，主演文艺片《游园惊梦》 [3]  。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角 [4]  。
    2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第41届台湾电影金马奖最佳男配角奖 [5]  。
    2005年，凭借动作片《旺角黑夜》首次提名第24届香港电影金像奖最佳男主角 [6]  。
</p>
<p class="p1">
    2006年，执导了个人电影处女作《四大天王》，凭该片获得第26届香港电影金像奖新晋导演奖 [7]  。
    2007年，在犯罪片《门徒》中饰演阿力 [8]  。2010年，担任监制并主演了爱情片《如梦》，凭该片第二次提名第46届台湾电影金马奖最佳男主角 [10]  。
    2011年，在爱情片《单身男女》中饰演建筑师方启宏 [11]  。2012年，在警匪片《窃听风云2》中饰演司马念祖 [38]  。2014年，主演犯罪片《魔警》，
    凭该片第二次提名第34届香港电影金像奖最佳男主角 [12]  ；同年，主演个人首部美剧《荒原》系列 [13]  。2015年，主演励志片《滚蛋吧！肿瘤君》。2016年，在奇幻片《魔兽》中饰演古尔丹 [14]  。
    2018年，吴彦祖参与设计的作品“木兰坊”入围了英国皇家建筑师学会奖 [87]  ；同年，在动作片《古墓丽影：源起之战》中饰演陆仁 [15]  。2020年，在警匪片《除暴》中饰演张隼 [16]  。

</p>
</body>
</html>

1.4、超链接伪类

-a：link 正常，未访问的链接
-a：visted 用户已访问的链接
-a：hover 当用户鼠标放在链接上时
-a：active 链接被点击的那一刻

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

<style>
    a{
        text-decoration: none;
        color: black;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
        color: orange;
    }
    /*鼠标按住未释放*/
    a:active{
        color: green;
    }
</style>
<body>
<a href="#">
    <img src="images/a.jpg" alt="">
</a>

<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="">作者孤尽老师</a>
</p>
<p>
    ￥99
</p>
</body>
</html>

1.5、文本阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow：#3ccf75 10px -10px 2px；
}

1.6、列表

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

<style>
    #nav{
        width:300px;
        background: #a0a0a0;
    }

    .title{
        font-size: 18px;
        font-weight: bold;
        text-indent: 1em;
        line-height: 35px;
        background: red;
    }
    /*ul li
    list-style:
    none    去掉圆点
    circle  空心圆
    decimal 数字
    square  正方形
    */
    ul li{
        height: 30px;
        list-style: none;
        text-indent: 1em;
    }
  a{
      text-decoration: none;
      font-size: 14px;
      color: #000;
  }
  a:hover{
      color: gray;
      text-decoration: underline;
  }
</style>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

1.7、背景图像应用

<style>
    div{
        width: 1000px;
        height: 700px;
        border:1px solid red;
        background-image: url("images/img.png");
        /*默认是全部平铺的*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

#nav{
    width:300px;
    background: #a0a0a0;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
    /*颜色，图片，图片位置，平铺方式*/
    background: red url("images/img_1.png")  100px 15px no-repeat;
}
/*ul li
list-style:
none    去掉圆点
circle  空心圆
decimal 数字
square  正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("images/img.png");
    background-repeat: no-repeat;
    background-position: 236px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: gray;
    text-decoration: underline;
}

1.8、渐变

网址：https://www.grabient.com/

<style>
    body{
        background-color: #4158D0;
        background-image: linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

    }
</style>

2、盒子模型

2.1、什么是盒子模型

CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性

首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height

2.2、边框

<style>
    /*body总有一个默认的外边距为0*/
    body{
        margin: 0;
    }

    /*border:粗细，样式，颜色*/
    #box{
        width: 300px;
        border:1px solid red;
        
    }
    h2{
        font-size: 18px;
        background-color: brown;
        line-height: 30px;
    }

    form{
        background: #dcd094;
    }
    div:nth-of-type(1) {
        border: 1px solid black;
    }
    div:nth-of-type(2) {
        border: 1px dashed yellow;
    }
    div:nth-of-type(3) {
        border: 1px solid green;
    }
</style>

2.3、内外边距

<style>
    /*body总有一个默认的外边距为0*/
    body{
        margin: 0;
    }

    /*border:粗细，样式，颜色*/
    /*margin默认顺序上右下左，顺时针旋转*/
    #box{
        width: 300px;
        border:1px solid red;
        margin: 0 auto;

    }
    h2{
        font-size: 18px;
        background-color: brown;
        line-height: 30px;
    }

    form{
        background: #dcd094;
    }
    input{
        border: 1px solid black;
   }
    div:nth-of-type(1){

    }
</style>

盒子的计算方式：这个元素到底多大？

margin+border+padding+内容宽度

2.4、圆角边框

<!--    左上  右上  右下  左下  顺时针-->
<!--    圆圈：圆角 = 半径！-->
<style>
    div{
        width: 100px;
        height: 50px;
        border: 1px solid red;
        border-radius: 50px 50px 0 0;
    }
</style>

2.5、阴影

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

<!--    margin: 0 auto;居中-->
<!--    要求：块元素，块元素有固定的宽度-->
    <style>
        div{
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>
<body>

<div style="width: 500px ;text-align: center" >
    <img  src="../images/img.png" alt="">
</div>

</body>
</html>

Cx陈

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【CSS】美化网页元素+盒子模型

CSS盒子模型（Boxmodel）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height。......
复制链接

扫一扫

专栏目录