第六章 盒子模型

最新推荐文章于 2020-10-05 08:06:53 发布
最新推荐文章于 2020-10-05 08:06:53 发布
阅读量636 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangMye/article/details/80759819
版权
1，制作北大青鸟网站的中心开班信息模块 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心开班信息</title>
    <style>
        div{width: 250px;margin: auto;background: linear-gradient(to bottom,#4bf7ff,white);
            border-radius:5%;border: 1px solid gainsboro;}
        ul{padding-left:10px;margin-top: 5px;margin-bottom:5px;}
         li{list-style: none;background: url("css/dotBg.gif");width: 230px;height: 30px;
         text-indent: 1em;padding-top: 3px;}
        li:nth-of-type(1){border-top: 1px solid white;margin-top: 5px;}
        img,ul{vertical-align: middle;}
        span{color: #FFFFFF;font-size: 12px;font-weight: bold;}
        a{text-decoration: none;color: black;}
        a:hover{color: red;}
    </style>
</head>
<body>
<div>
    <ul><span><img src="css/bg.gif">中心开班信息</span>
        <li><a href="">8月12日：学历+技能班</a></li>
        <li><a href="">8月16日：高考特招班</a></li>
        <li><a href="">8月23日：Java精英班</a></li>
        <li><a href="">8月31日：学士后强化班</a></li>
        <li><a href="">9月5日：大学生就业班</a></li>
        <li><a href="">9月9日：企业定向委培班</a></li>
        <li><a href="">9月16日：网络营销强化班</a></li>
    </ul>
</div>
</body>
</html>
2，制作商品分类列表 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类列表</title>
    <style>
        div{border: 2px solid coral;border-radius: 1%;width: 250px;margin: auto;}
        p{height:30px;text-indent: 4em;padding-top :10px;padding-bottom: 10px;}
        p:nth-of-type(1){background:url("css/icon_01.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(2){background:url("css/icon_02.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(3){background:url("css/icon_03.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(4){background:url("css/icon_04.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(5){background:url("css/icon_05.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(6){background:url("css/icon_06.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(7){background:url("css/icon_07.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(8){background:url("css/icon_08.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(9){background:url("css/icon_09.jpg")4px no-repeat;border-bottom: 1px dashed gray;}
        p:nth-of-type(10){background:url("css/icon_10.jpg")4px no-repeat;margin-bottom: 5px; }
        a{text-decoration: none;color: black;}
        a:hover{color: red;}
    </style>
</head>
<body>
<div>
    <p><a href="">酒水、饮料</a></p>
    <p><a href="">进口食品</a></p>
    <p><a href="">休闲零食</a></p>
    <p><a href="">地方特产</a></p>
    <p><a href="">保健、冲调</a></p>
    <p><a href="">粮油、生鲜</a></p>
    <p><a href="">美容洗护</a></p>
    <p><a href="">清洁洗涤</a></p>
    <p><a href="">母婴、纸品</a></p>
    <p><a href="">家居百货</a></p>
</div>
</body>
</html
3，制作权威课程免费体验登陆页面 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登陆页面</title>
    <style>
        div{background: url("css/bg.jpg")no-repeat;padding-bottom: 40px;margin-left: 600px;
        border-radius: 10px;width: 300px;height: 310px;
        }
        ul{color: #FFFFFF;padding-top:80px;padding-left: 20px; border-radius:10px;}
        li{list-style: none;}
        span{color: red;}
        p{padding-left: 30px;}
        a {margin-left: 80px;}
    </style>
</head>
<body>
<div>
    <ul>
        <p> <li><span>*</span>姓名：<input type="text"size="25"> </li></p>
        <p><li><span>*</span>邮箱：<input type="text"size="25"></li></p>
        <p> <li><span>*</span>电话：<input type="text"size="25"></li></p>
    </ul>
   <p> 性别：
    <select>
        <option value="1">性别</option>
        <option value="">男</option>
        <option value="">女</option>
    </select>
    </p>
   <p> 年龄：
    <select>
        <option value="1">年龄</option>
        <option value="">N</option>
    </select>
    </p>
    <a href=""><img src="css/btn.jpg"></a>
</div>
</body>
</html>

JiangMye
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第六章 盒子模型
NoKris的博客
06-27 135
​ 盒子模型就如图片所示，它有高和宽，有外边距，边框，内边距和网页元素构成的一个整体。接下来我们就着重介绍一下上面的几个概念。​ 边框分为上，右，下，左四个部分，我们都可以单独设置边框的颜色，粗细，样式等风格。下面我们先来看颜色。​ 边框的所有属性都可以分成四个部分设置，格式：。​ 调整边框粗细，我们用,这个属性的属性值有两种写法。​ 边框样式有很多种，我们只说常用的几种。 ​ 效果图：​ 效果图：​ 盒子阴影和字体阴影有些许相似。lur-radius color;...
HTML5 第六章盒子模型课后作业
tb19930719的博客
06-21 7075
制作北大青鸟网站中心开班信息模块&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;style&gt; div{
HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)
拂欢
07-23 3732
代码如下，自需自看： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; ...
作业一学期三书六章
sc13647346287的博客
10-29 449
1.什么是盒子模型？盒子模型的属性有那几个？它们的作用分别是什么？ （1）CSS将网页中所有元素都看成一个个盒子。 （2）盒子模型属性有边框、内边距和外边距。 （3）边框设置网页元素边框的颜色、粗细和样式；外边距指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离，便于精确控制盒子的位置；内边距用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。 2.盒子模型有哪几种解析方式？它们...
第六章:盒子模型 课后作业：
gz98411的博客
06-21 4866
1.制作图北大青鸟网站的中心开班信息模块。要求如下：&lt;页面宽度250px，整体居中显示，背景使用线性渐变及1px的灰色圆角边框。&lt;标题左侧的小图标以背景图片的方式实现，标题颜色为白色。&lt;使用无序实现开班信息列表，列表前的小三角箭头和下方的虚线均使用背景图像的方式实现。&lt;列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上是，字体颜色改变无下划线。&lt;页面中涉及的...
移动端第六章 盒子模型
LW0512的博客
10-05 143
盒子模型 什么是盒子模型? 原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型 实例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
第六章盒子模型.xmind
11-30
第六章盒子模型.xmind
第六章 盒子模型.md
10-16
第六章 盒子模型.md
HTML5+CSS3网页设计-第六章 盒子模型.pptx
12-21
在第六章“HTML5+CSS3网页设计-第六章 盒子模型”中，我们将深入探讨这些概念。 首先，要设置一个`<li>`标签的下边框为1px的蓝色虚线，可以使用以下CSS代码： ```css li { border-bottom: 1px dashed blue; } ``` ...
前端基础知识包括盒子模型，css，html，布局和基础计算机进制知识
01-05
布局是指如何在页面上组织和排列元素，有多种布局技术，如流式布局（适合文本为主的网站）、网格布局（常用于响应式设计）、Flexbox（灵活的盒子模型，适用于复杂布局）和CSS Grid（二维网格系统，适用于复杂布局和...
S1课程HTML全部实例
03-07
S1课程HTML全部实例和网页布局、S1课程HTML全部实例和网页布局
web盒子模型
12-12
简述盒子模型，以及前端常见的面试题， 以及前端开发中遇到的一些兼容问题和穿透
HTML---第六章盒子模型基础
gengzhi1293443962的博客
10-18 1678
无标题文档 .a1 { height: 222px; width: 222px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: dashed; border-right-s
盒子模型 第六章
liyanghahahhaha的博客
06-21 991
第一题：制作北大青鸟网站的中心开班信息模块。h3{ font-size: 15px; color: #FFFFFF; border-bottom: 1px #FFFFFF solid; text-indent: 2.5em; padding: 5px; } h3:nth-of-type(1){ background: url("../../pictu...
第六章作业
weixin_43024782的博客
11-09 755
1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？ 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。 盒子模型边框（border） 属性：border-width（设置边框宽度）|border-style（设置边框样式）|bo...
盒子模型之中心开班信息页面
天天向上
10-12 1610
中心开班信息页面 中心开班信息 8月12日：学历+技能班 8月16日：高考特招班 8月23日：Java精英班 8月31日：学士后强化班 9月5日：大学生就业班 9月9日：企业定向委培班 9月16日：网络营销强化班 //css样式 #list{ width: 250px; background: linear-gradient(to bottom,#70c9fa,#9fdbfc,
HTML5和CSS3开发第六章知识点
suixinCaesar的博客
06-21 623
1，盒子模型的使用:边框(border-color,border-width,border-style)2，内边距：padding3，外边距：margin4，盒子总尺寸： border+padding+margin+内容宽/高5，box-sizing:(content-box,border-box)6，圆角边框:border-radius语法    border-radius制作特殊图形7，盒子阴...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
最新发布
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
韦斯伯德六个盒子模型下的组织诊断问卷详解
六个盒子模型由韦斯伯德提出，它将组织划分为六个关键领域：1) 使命/目标，关注组织的核心业务和战略方向；2) 结构，涉及工作分配和职责划分；3) 关系，探讨团队协作与冲突解决机制；4) 激励，研究驱动员工行为的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值