盒子模型（网页内容设计、美化）

作者: i我所爱 | 来源:发表于2018-11-13 21:09 被阅读53次

边框：
边框的颜色：border-color
1.border-top-color:red;:上边框颜色
2.border-right-color:red;:右边框颜色
3.border-bottom-color:red;:下边框颜色
4.border-left-color:red;:左边框颜色
5.border-color: #0d7114;:四个边框同一颜色
6.border-color: #0d7114 #000;:上下边框,左右边框
7.border-color: #0d7114 #000 #f00;:上边框,左右边框,下边框
8.border-color: #0d7114 #000 #f00 #00f;:上边框,右边框,下边框,左边框
事例：

div{
            border: 10px solid;
            width: 250px;
            height: 250px;
            border-color: orange red blue green;
            /*上    右    下   左*/
            /*border-color: orange red blue;*/
            /*上   左右   下*/
        }

边框颜色

边框样式： border-style
1.border-top-style: solid;上边框实线
2.border-right-style: dotted; 右边框短虚线
3.border-bottom-style: dashed; 下边框长虚线
4.border-left-style: double; 左边框双实线
5.border-style: solid dotted dashed double; 上，右，下，左
总结：border:1px solid red;
事例：

div{
            /*border-style:dashed;           /!*  长虚线 *!/*/
            /*/!*border-style:dotted;        /!* 短虚线 *!/*/
            /*/!*border-style:solid;         /!* 单实线 *!/*/
            border-style:double;             /*  双实线 */
            width: 120px; 
            height: 120px;
        }

双实线(边框线的修改)

外边距：margin
1.margin-top:1px;上边框外边距
2.margin-right:1px;右边框外边距
3.margin-bottom:1px;下边框外边距
4.margin-left:1px;左边框外边距
5.margin:1px 2px 3px 4px;上，右，下，左
6.margin: 0px auto;网页居中对齐（块元素，固定宽度）
内边距：padding
1.padding-top:1px;上边框内边距
2.padding-right:1px;右边框内边距
3.padding-bottom:1px;下边框内边距
4.padding-left:1px;左边框内边距
5.padding:1px 2px 3px 4px;上，右，下，左

div{
            border:dashed 5px orange;
            width: 120px;
            height: 120px;
            /*margin: 40px;*/
            margin: 0 auto;
            padding: 40px;
        }

虚线，内外边距

圆角边框：border-radius: 20px 10px 50px 30px;从左定点开始顺时针排列
圆形：border-radius: 50%;
盒子阴影：box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型
x-offset：X轴位移
y-offset：Y轴位移
blur-radius：模糊半径
color：模糊颜色

利用上面的知识点，和前面几天学习的内容。
(第五章美化网页元素https://www.jianshu.com/p/924190ee789a)
完成下面作业：
作业1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鸟课程导航</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body {
            font-family: 楷体;
            width: 380px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        li{
            list-style-type: none;
        }
        div{
            margin-left: 150px;
            margin-top: 15px;
            border:1px solid #aacbee ;
            background-color: #f5f9fc;
        }
        .titles{
            font-size: 20px;
            color: #1F376D;
            background: url(../images/ch20.2.gif) 1px center no-repeat;
            text-indent: 25px;
            line-height: 40px;
        }
        li{
            background: url(../images/ch20.1.gif )right no-repeat;
            border-top: solid 1px #aacbee;
            line-height: 30px;
            font-size: 20px;
            text-indent: 8px;
            margin: 0px 4px;
        }
    </style>
</head>
<body>
<div id="course_list">
    <h1 class="titles">课程导航</h1><ul>
    <li class="current"><a href="#">ACCP 软件工程师</a></li>
    <li><a href="#">BTEST 软件测试工程师</a></li>
    <li><a href="#">BENET 网络工程师</a></li>
    <li><a href="#">JBNS 网站工程师</a></li>
    <li><a href="#">ACCP 启蒙星</a></li>
    <li><a href="#">ANDROID 软件工程师</a></li>
    <li><a href="#">JAVA 软件工程师</a></li>
    <li><a href="#">.NET 软件工程师</a></li>
    <li><a href="#">网络营销</a></li>
</ul>
</div>
</body>
</html>

结果如图所示：

课程导航

作业2：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分类</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: #808080;
        }
        div{
            width: 300px;
            background-color: white;
        }
        h1{
            background-color: black;
            font-size: 15px;
            line-height: 30px;
            color: white;
            text-indent: 20px;
        }
        dt{
            line-height: 40px;
        }
        dd{
            border-bottom:dashed 1px;
            line-height: 40px;
            padding-left: 30px;
        }
        dt:nth-of-type(1) {
            background: url(../images/icon_01.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(2) {
            background: url(../images/icon_02.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(3) {
             background: url(../images/icon_03.gif) 0px center no-repeat;
             text-indent: 30px;
        }
        dt:nth-of-type(4) {
              background: url(../images/icon_04.gif) 0px center no-repeat;
              text-indent: 30px;
        }
        dt:nth-of-type(5) {
            background: url(../images/icon_05.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(6) {
            background: url(../images/icon_06.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(7) {
            background: url(../images/icon_07.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(8) {
            background: url(../images/icon_08.gif) 0px center no-repeat;
            text-indent: 30px;
        }
        dt:nth-of-type(9) {
             background: url(../images/icon_09.gif) 0px center no-repeat;
             text-indent: 30px;
        }

    </style>
</head>
<body>
<div id="product">
    <h1>全部分类</h1>
    <dl>
        <dt>护肤</dt>
        <dd>洁面 化妆水 喷雾 美容液 眼霜<br/>
            眼部精华 眼膜 面膜 面膜贴<br/>
            水洗面膜 免洗面膜 精华 精油<br/>
            凝露 乳液 面霜 日霜 晚霜
        </dd>
        <dt>彩妆</dt>
        <dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
            睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
            底妆 遮瑕 蜜粉 眉笔 美甲
        </dd>
        <dt>香氛</dt>
        <dd>男香 女香 小Q装 中性香水</dd>

        <dt>身体护理</dt>
        <dd>洗发 护发 沐浴 身体乳 手足护理<br/>
            护手霜 纤体 身体精油 颈部护理<br/>
            个人护理 卫生用品 脱毛
        </dd>
        <dt>礼盒套装</dt>
        <dd>护肤套装 身体护理套装 彩妆套装 <br/>
            旅行装 香水套装 男士套装
        </dd>
        <dt>美容工具</dt>
        <dd>护肤 彩妆 美发 美体 美甲 <br/>
            美容仪器 其他美容工具
        </dd>
        <dt>母婴专区</dt>
        <dd>奶粉 尿裤湿巾 母婴洗护</dd>
        <dt>男士专区</dt>
        <dd>洁面 爽肤水 面霜 男香<br/>
            眼霜 凝胶 乳液 精华 沐浴
        </dd>
        <dt>食品保健</dt>
        <dd>瘦身类 保健类 美容类 食品类</dd>
    </dl>
</div>
</body>
</html>

结果如图所示：

商品分类

作业3：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       li{
           list-style-type: none;
       }
       body {
           width: 300px;
           height: 300px;
           margin: 80px 80px;
       }
       h2{
           color: mediumpurple;
           border-bottom: dotted 1px;
           background:linear-gradient(to top,white,#DDDFFF,#9698FF);
           text-indent: 25px;
           line-height: 60px;
           border-left: solid #DDDFFF;
           border-right: solid #DDDFFF;
           border-top: solid #DDDFFF;
       }
       ul{
           text-indent: 25px;
           line-height: 40px;
           border-bottom: solid #DDDFFF;
           border-left: solid #DDDFFF;
           border-right: solid #DDDFFF;
       }
   </style>
</head>
<body>
<h2>京东快报</h2>
<ul>
   <li>[特惠]海飞丝去屑又去油 超清爽</li>
   <li>[公告]京东公益支持鲁甸新动作</li>
   <li>[特惠]4688元抢iPhone 6</li>
   <li>[公告]小米电视携豪礼高调入驻京东</li>
</ul>
</body>
</html>

结果如图所示：

京东快报

作业4：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>爱奇异视频播放列表</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        h3{
            margin-left: 50px;
            margin-top: 40px;
        }
        li{
            width: 240px;
            height: 420px ;
            display: inline-block;
            margin-top: 30px;
            margin-left: 50px;
            line-height: 30px;
        }
        li:hover {
            border-radius: 20px 20px 20px ;
            box-shadow: 1px 1px 1px 1px grey ;
        }
        img{
            border-radius: 15px 15px 15px ;
            margin-top: 20px;
            margin-left:15px;
        }
        li h4:nth-of-type(1){
            font-size: 16px;
            color: #4d4d4d;
            margin-left: 8px;
        }

        li p:nth-of-type(1){
            color: #640000;
            font-size: 14px;
            margin-left: 8px;

        }
        li p:nth-of-type(2){
            font-size: 12px;
            color: blue;
            margin-left: 8px;
        }
    </style>
</head>
<body>
<h3>热播</h3>
<ul>
    <li>
        <img src="../images/ch25.1.png " alt=""/>
        <h4>神武赵子龙</h4>
        <p>怒，林更新不抱网红抱女神</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="../images/ch25.2.png" alt=""/>
        <h4>旋风十一人</h4>
        <p>胡歌变教练在撩前女友</p>
        <p>点击次数：242445次</p>

    </li>
    <li>
        <img src="../images/ch25.3.png " alt=""/>
        <h4>太阳的后裔</h4>
        <p>宋慧乔吃嫩草</p>
        <p>点击次数：242445次</p>

    </li>
    <li>
        <img src="../images/ch25.4.png " alt=""/>
        <h4>山海经之赤影传说</h4>
        <p>娜扎张翰再度联手</p>
        <p>点击次数：242445次</p>

    </li>
</ul>
</body>
</html>

结果如图所示：

爱奇艺视频播放列表

好像代码太多了。今天晚上没时间对作业题解析。
看不懂见谅！！！谢谢赏脸！！！

盒子模型（网页内容设计、美化）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

web