7.18 HTML每日作业

原创 于 2022-07-18 20:21:07 发布 · 250 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #html5 #css

从今天开始我会把每日的作业分享在这里，以后可以时常回来观看曾经有哪些代码错误和格式错误，督促自己不断前进：

1.目标图：

完成代码： 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigbox {
        width: 222px;
        height: 320px;
        background-color: rgb(245, 249, 252);
        border: 2px solid rgb(170, 203, 238);
      }
      li {
        list-style: none;
        height: 31px;
        width: 212px;
        border-top: 1px solid rgb(207, 226, 245);
      }
      ul {
        padding-left: 5px;
        margin: 0 0 0 0;
      }
      span {
        line-height: 30px;
      }
      a {
        display: inline-block;
        height: 30px;
        color: black;
        text-decoration: none;
        line-height: 30px;
      }
      li + li > img {
        vertical-align: middle;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <ul>
        <li>
          <img src="./图片素材/title_icon.gif" alt="1" class="p1" /><span
            >课程导航</span
          >
        </li>
        <li>
          <a href="#">ACCP 软件工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">BTEST 软件测试工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">BENET 网络工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">JBNS 网站工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">ACCP 启蒙星</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">ANDROID 软件工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">JAVA 软件工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">.NET 软件工程师</a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
        <li>
          <a href="#">网络营销 </a>
          <img src="./图片素材/图片素材.png" alt="1" />
        </li>
      </ul>
    </div>
  </body>
</html>

完成效果图： 

2. 目标图：

 

完成代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigbox {
        width: 230px;
        height: 420px;
        border: 1px solid black;
      }
      li {
        list-style: none;
      }
      ul {
        padding-left: 30px;
        margin: 0 0 0 0;
      }
      a {
        color: rgb(98, 99, 101);
        text-decoration: none;
        font-size: 12px;
      }
      a:hover {
        color: red;
      }
      h3 {
        margin: 0 0 0 20px;
        color: white;
      }
      p {
        height: 30px;
        margin: 0 0 0 0;
        line-height: 30px;
      }
      img {
        vertical-align: middle;
      }
      .smallbox1 {
        height: 40px;
        line-height: 40px;
        background-color: black;
      }
      .smallbox2 {
        height: 120px;
        border-bottom: 1px dashed black;
      }
      .smallbox3 {
        height: 100px;
        border-bottom: 1px dashed black;
      }
      .smallbox4 {
        height: 55px;
        border-bottom: 1px dashed black;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="smallbox1">
        <h3>全部分类</h3>
      </div>
      <div class="smallbox2">
        <p><img src="./图片素材/icon_01.gif" alt="1" /><span>护肤</span></p>
        <ul>
          <li>
            <a href="#">洁面</a> <a href="#">化妆水</a> <a href="#">喷雾</a>
            <a href="#">美容液</a> <a href="#">眼霜</a>
          </li>
          <li>
            <a href="#">眼部精华</a> <a href="#">眼膜</a> <a href="#">面膜</a>
            <a href="#">面膜贴</a>
          </li>
          <li>
            <a href="#">水洗面膜</a> <a href="#">免洗面膜</a>
            <a href="#">精华</a> <a href="#">精油</a>
          </li>
          <li>
            <a href="#">凝露</a> <a href="#">乳液</a> <a href="#">面霜</a>
            <a href="#">日霜</a> <a href="#">晚霜</a>
          </li>
        </ul>
      </div>
      <div class="smallbox3">
        <p><img src="./图片素材/icon_02.gif" alt="1" /><span>彩妆</span></p>
        <ul>
          <li>
            <a href="#">卸妆</a> <a href="#">防晒</a> <a href="#">隔离</a>
            <a href="#">粉底</a> <a href="#">粉饼</a>
          </li>
          <li>
            <a href="#">睫毛膏</a> <a href="#">眼影</a> <a href="#">唇彩</a>
            <a href="#">眼线笔</a> <a href="#">腮红</a>
          </li>
          <li>
            <a href="#">底妆</a> <a href="#">遮瑕</a> <a href="#">眉笔</a>
            <a href="#">美甲</a>
          </li>
        </ul>
      </div>
      <div class="smallbox4">
        <p><img src="./图片素材/icon_03.gif" alt="1" /><span>香氛</span></p>
        <ul>
          <li>
            <a href="#">男香</a> <a href="#">女香</a> <a href="#">小样</a>
            <a href="#">中性香水</a>
          </li>
        </ul>
      </div>
      <div class="smallbox5">
        <p><img src="./图片素材/icon_04.gif" alt="1" /><span>身体护理</span></p>
        <ul>
          <li>
            <a href="#">洗发</a> <a href="#">护发</a> <a href="#">身体乳</a>
            <a href="#">手足护理</a>
          </li>
          <li>
            <a href="#">护手霜</a> <a href="#">纤体</a> <a href="#">身体精油</a>
            <a href="#">颈部护理</a>
          </li>
          <li>
            <a href="#">个人护理</a> <a href="#">卫生用品</a>
            <a href="#">脱毛</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

完成效果图：

 

3. 目标图：

 

完成代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #bigbox {
        width: 230px;
        height: 170px;
        border: 2px solid rgb(230, 230, 230);
      }
      #smallbox1 {
        height: 45px;
        border-bottom: dotted rgb(233, 233, 226) 2px;
        background-image: -webkit-linear-gradient(
          bottom,
          rgb(255, 255, 255),
          rgb(206, 206, 255)
        );
        line-height: 45px;
      }
      #smallbox2 {
        margin-left: 12px;
      }
      li {
        height: 25px;
      }
      p {
        margin: 0 0 0 12px;
      }
      a {
        color: black;
        text-decoration: none;
        font-size: 12px;
      }
      a:hover {
        color: red;
      }
      li {
        list-style: none;
      }
      ul {
        padding-left: 0;
        margin-top: 8px;
      }
      .c1 {
        font-weight: 800;
      }
    </style>
  </head>
  <body>
    <div id="bigbox">
      <div id="smallbox1">
        <p>京东快报</p>
      </div>
      <div id="smallbox2">
        <ul>
          <li>
            <a href="#"
              ><span class="c1">[特惠] </span> 海飞丝去屑又去油 超清爽</a
            >
          </li>
          <li>
            <a href="#"
              ><span class="c1">[公告] </span> EBO 京东公益支持鲁甸新动作</a
            >
          </li>
          <li>
            <a href="#"><span class="c1">[特惠] </span> 4688元抢iPhone 6</a>
          </li>
          <li>
            <a href="#"
              ><span class="c1">[公告] </span> 小米电视携豪礼高调入驻京东</a
            >
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

完成效果图：

 

4. 目标图：

 

完成代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 260px;
        height: 330px;
        border: 2px solid black;
      }
      li {
        list-style: none;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px dashed rgb(166, 163, 163);
      }
      ul {
        margin: 0 0 0 0;
        padding-left: 0;
      }
      a {
        color: black;
        text-decoration: none;
        font-size: 12px;
      }
      p {
        margin: 0 0 0 0;
        padding-left: 10px;
        color: white;
        height: 35px;
        background-color: rgb(233, 24, 90);
        font-size: 13px;
        line-height: 35px;
      }
      span {
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: white;
        background-color: black;
        line-height: 25px;
        text-align: center;
        margin-left: 5px;
      }
      a:hover {
        color: red;
      }
      a:hover span {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>大家都喜欢买的美容品</p>
      <ul>
        <li>
          <a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a>
        </li>
        <li>
          <a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜75ml</a>
        </li>
        <li>
          <a href="#"><span>3</span> OLAY玉兰油多效修护霜50g</a>
        </li>
        <li>
          <a href="#"><span>4</span> 巨型一号丝瓜水320ML</a>
        </li>
        <li>
          <a href="#"><span>5</span> 情碧保湿洁肤水2200ml</a>
        </li>
        <li>
          <a href="#"><span>6</span> 比度克细肤淡印霜30g</a>
        </li>
        <li>
          <a href="#"><span>7</span> 兰芝(LANEIGE)夜间修护锁水面膜80ml</a>
        </li>
        <li>
          <a href="#"><span>8</span> SK-II护肤精华露215ml</a>
        </li>
        <li>
          <a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a>
        </li>
      </ul>
    </div>
  </body>
</html>

完成效果图：

 

5. 目标图：

 

完成代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bigbox {
        width: 250px;
        height: 270px;
        border: 1px solid rgb(216, 216, 216);
        border-radius: 10px 10px 10px 10px;
      }
      .smallbox {
        background-image: -webkit-linear-gradient(
          bottom,
          rgb(248, 252, 255),
          rgb(168, 222, 252)
        );
      }
      li {
        margin-left: 15px;
        list-style: none;
        width: 220px;
        height: 30px;
        border-bottom: 2px dashed rgb(157, 157, 157);
        line-height: 30px;
      }
      ul {
        padding-left: 0;
        margin: 0 0 0 0;
      }
      a:hover {
        color: red;
      }
      p {
        border-radius: 9px 9px 0 0;
        border-bottom: 2px solid white;
        color: white;
        height: 40px;
        line-height: 40px;
        margin: 0 0 0 0px;
        padding-left: 15px;
        background-image: -webkit-linear-gradient(
          bottom,
          rgb(158, 218, 251),
          rgb(91, 193, 249)
        );
      }
      a {
        color: black;
        text-decoration: none;
      }
      img {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="bigbox">
      <p><img src="./图片素材/bg.gif" alt="1" />中心开班信息</p>
      <ul>
        <div class="smallbox">
          <li class="l1">
            <a href="#"
              ><img src="./图片素材/特殊小箭头.png" alt="1" />
              8月12日：学历+技能班</a
            >
          </li>
        </div>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" /> 8月16日：高考特招班</a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" /> 8月23日：Java精英班</a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" />
            8月31日：学士后强化班</a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" /> 9月5日：大学生就业班</a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" />
            9月9日：企业定向委托班</a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./图片素材/小箭头.png" alt="1" />
            9月16日：网络营销强化班</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>

完成效果图：

 

6. 目标图：

 

完成代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 340px;
        height: 380px;
        background-image: -webkit-linear-gradient(
          bottom,
          rgb(38, 140, 215),
          rgb(62, 164, 236)
        );
      }
      h1 {
        color: white;
        vertical-align: middle;
        padding-left: 40px;
        text-align: top;
      }
      h1 > img {
        margin-top: 10px;
      }
      p {
        padding-left: 35px;
        color: white;
      }
      .p2 {
        margin-left: 90px;
      }
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>免费抢先体验 <img src="./图片素材/权威课程.png" alt="" /></h1>
      <p><span>*</span>姓名： <input type="text" name="userName" /></p>
      <p><span>*</span>邮箱： <input type="text" name="userName" /></p>
      <p><span>*</span>电话： <input type="text" name="userName" /></p>
      <p>
        性别：
        <select name="sex">
          <option value="none">请选择</option>
          <option value="male">男</option>
          <option value="female">女</option>
          <option value="no">不明</option>
        </select>
      </p>
      <p>
        年龄：
        <select name="sex">
          <option value="none">请选择</option>
          <option value="male">0-18</option>
          <option value="female">18-25</option>
          <option value="no">35-60</option>
          <option value="no">60-100</option>
        </select>
      </p>
      <img src="./图片素材/btn.jpg" alt="1" class="p2" />
    </div>
  </body>
</html>

完成效果图：

 

CSS3样式
weixin_48035827的博客
01-22 1450
目录 CSS概念 CSS基本语法 css引入方式 css的注释 CSS选择器 基本选择器 层次选择器 结构伪类选择器 属性选择器 美化网页元素 字体样式 文本样式 文本，阴影和超链接伪类 列表 背景 盒子模型 边框border 内边距padding 外边距margin 圆角边框 盒子阴影 浮动 标准文档流 display 父级边框塌陷问题及overflow float及与display的对比 定位 相对定位 绝对定位与固定定位 z-index
不要告诉我你懂margin
dgk62408的博客
06-27 1229
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于...
css学习笔记
cj1064789374的博客
01-22 332
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> <body> <h1 style="color: red">hello world</h1> </body> &lt.
web前端学习（二十）——CSS3外边距属性（margin）及填充属性（padding）的相关设置
热门推荐
贝尔摩德苦艾酒
01-29 1万+
web前端学习（二十）——CSS3外边距属性（margin）及填充属性（padding）的相关设置
护肤品html作业,聚美优品美容产品热点.html
weixin_31528001的博客
06-17 1077
美容热点产品*{margin: 0;padding: 0;}body{background-color: #EEE7E1;}#beauty ul li{list-style-type: none;border-bottom: 1px dashed;height: 30px;line-height: 30px;font-size: 12px;}#beauty{width: 250px;margin:...
7.18作业.py
07-19
7.18作业.py
JMSAP02—丰 7.18公文作业.docx
09-09
JMSAP02—丰 7.18公文作业.docx
《MidroTik RouterOS v7.18 VMware虚拟机安装包 + L6 授权：路由学习的高效便捷利器》
02-25
MidroTik RouterOS v7.18 VMware虚拟机安装包搭配 L6 授权在路由学习领域的应用。MidroTik RouterOS v7.18 作为一款功能强大的路由操作系统，其虚拟机安装包形式为用户提供了便捷的部署方式，能够在虚拟环境中快速...
Icarus-3.2.7.18软件压缩包及解压密码sqsxfree
最新发布
07-08
需要注意的是，尽管Icarus是免费工具，但为了保证服务稳定和IP资源充足，用户可能需要遵守一些使用规则，例如限制每日切换次数或通过参与社区活动来获取更多IP资源。此外，用户在使用时应保持警惕，避免在不安全的...
ros7.18
05-18
### 关于ROS Version 7.18的相关信息 目前官方并未提及存在名为“Version 7.18”的具体版本编号[^3]。通常情况下，ROS（Robot Operating System）采用的是基于发行代号的命名方式，例如 ROS Kinetic Kame、ROS ...
ASP.NET的皮肤、主题和母版页
yantaiwuyansong的专栏
04-26 3145
第12章  ASP.NET的皮肤、主题和母版页 在Web应用程序开发中，一个良好的Web应用程序界面能够让网站的访问者耳目一新，当用户访问Web应用时，网站的界面和布局能够提升访问者对网站的兴趣和继续浏览的耐心。ASP.NET提供了皮肤、主题和模板页的功能增强了网页布局和界面优化的功能，这样即可轻松的实现对网站开发中界面的控制。 12.1  皮肤和主题 皮肤和主题是自ASP.NET 2.0就
前端全栈学习笔记第四天 - CSS
不想起床
01-10 252
之前很杂的把前端几乎学了一遍，从html,css，h5,c3,js，jq，ajax，php，vue，微信小程序，微信小游戏，three.js,node，mongodb现在再系统的学一遍，为明年实习打下扎实的基础，简单的就不再赘述。先看一下第四天的学习路线 第四天的学习 第一个重头戏是标签的类型(显示模式) 第二个是css三大特性 第三个是css背景 一 ：标签的显示模式：display ...
CSS学习之道：margin和padding
Java小迷的专栏
10-09 1236
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放 在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容 (content)、边框距(padding)、边界(border)和边距(margin)。 对于初学者，经常会搞不清楚margi
CSS:margin属性备忘
csdou的专栏
03-03 518
参考资料：http://www.blueidea.com/tech/web/2007/4546.asp，由浅入深漫谈margin属性 - 网页制作 - 蓝色理想 直接上代码：http://www.w3.org/1999/xhtml">aaa        html  { }    body  {  margin:0px; }          ，因为top100，所以再往下移动10
margin 实现水平居中，垂直居中
lucky__peng的博客
03-04 8457
首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。 1.块及元素水平方向居中： 原理：两侧auto，则平分剩余空间，相当于水平居中。 div { margin-right: auto;  margin-left: auto;...
margin后边的参数个数大解析
莫雨 · 涛
12-14 1244
margin: 10px;（上、下、左、右各10px。） margin: 10px 10px;（上、下10px；左、右20px。） margin: 10px 20px 20px;（上10px；左、右20px；下30px。） margin: 10px 20px 30px 40px;（上10px；右20px；下30px；左40px。）类推，padding,border亦是如此！
css中margin 缩写方式
weixin_34341117的博客
06-18 392
<html> <body> <div style="border: 1px solid red;"> <div style="border: 1px solid blue; margin: 20px;"> margin: 20px;（上、下、左...
前端第二次作业-仿百度网页
m0_64645111的博客
05-11 525
静态网页 效果图： 局部： 左上部分： 文本框点击后： 代码↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid..
HTML第六章上机练习3
qq_36074064的博客
10-18 5676
美容热点产品 大家都喜欢买的美容品 1雅诗兰黛即时修护眼部精华霜15ml 2伊丽莎白雅顿显效复合活肤霜 75ml 3OLAY玉兰油多效修护霜 50g 4巨型一号丝瓜水320ML 5倩碧保湿洁肤水2号 200ml 6比度克细肤淡印霜 30g 7兰芝 (LANEIGE)夜间修护锁水面膜 80ml 8SK-II护肤精华露
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执笔绘江山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值