第七、八章作业

最新推荐文章于 2022-05-16 10:32:29 发布

憶yǐ

最新推荐文章于 2022-05-16 10:32:29 发布

阅读量664

点赞数

分类专栏：作业文章标签：作业

本文链接：https://blog.csdn.net/weixin_43024782/article/details/84247072

版权

作业专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1.清除浮动的方法有哪几种？分别如何实现？
4种
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overflow属性 overflow-hidden
4.父级添加伪类after content:’’; display:block; clear:both;

2.使用display：inline-block或float布局网页有什么区别？需要注意什么？
display:inline-block 有缝隙 float没有
注意使用场景

3.制作图所示的摄影社区热门小区页面，要求如下：
使用div和无序列表相结合的方法布局HTML文档
使用float属性创建横向多列布局排版网页元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影社区热门小镇</title>
    <style>
      div{
        width: 770px;
        height: 300px;
        border: 1px solid;
         }
      li{
        float: left;
        list-style: none;
        margin-right:60px;
      }
      p{
        display: inline-block;
        margin-left: 10px;
      }
      #y{
        margin-right: 24px;
      }
      img{
        border: 1px solid;
        padding: 3px 3px 3px 3px;
        border-radius: 5px;
      }
    </style>
</head>
<body>
<div>
  <p>摄影社区热门小镇</p>
  <ul>
    <li>
      <img src="../image/pic_01.jpg" height="60" width="60"/>
      <p>风景狙击手<br>
        成员：80<br>
        作品：276</p>
    </li>
    <li>
      <img src="../image/pic_02.jpg" height="60" width="60"/>
      <p>叙事感<br>
        成员：235<br>
        作品：116</p>
    </li>
    <li>
      <img src="../image/pic_03.jpg" height="60" width="60"/>
      <p>定焦视界<br>
      成员：56<br>
      作品：456</p>

    </li>
    <li>
      <img src="../image/pic_04.jpg" height="60" width="60"/>
      <p>中画幅乐园<br>
        成员：130<br>
        作品：239</p>
    </li>
    <li id="y">
      <img src="../image/pic_05.jpg" height="60" width="60"/>
      <p>《卡啪》先锋...<br>
        成员：78<br>
        作品：125</p>
    </li>
    <li>
      <img src="../image/pic_06.jpg" height="60" width="60"/>
      <p>植物的无声世界<br>
        成员：235<br>
        作品：1258</p>
    </li>
  </ul>
</div>
</body>
</html>

4.制作彩妆热卖产品页面，要求如下：
页面背景颜色为浅黄色，彩妆热卖产品列表背景颜色为白色
标题放在段落标签中，标题背景颜色为桃红色，字体颜色为白色
使用无序列表制作彩妆热卖产品列表，两个产品列表之间使用虚线隔开
超链接字体颜色为灰色，无下划线，数字颜色为白色，数字背景为灰色圆圈
当鼠标移到超链接上时，超链接字体颜色为桃红色，无下划线，数字颜色为白色，数字背景为桃红色圆圈，并显示产品对应图片、价格和当前已购买人数

彩妆热卖产品列表

大家都喜欢的彩妆

1Za姬芮新能真皙美白隔离霜 35g

￥62.00 最近69122人购买
2美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml

￥89.00 最近13610人购买
3菲奥娜水漾CC霜40g

￥59.90 最近13403人购买
4DHC 蝶翠诗橄榄卸妆油 200ml

￥169.00 最近16757人购买

## 第八章
1、制作美食今日推荐页面

美食今日推荐

SHOP 今日推荐

汉来国际美食百货

口味：创意中餐
区域：朝阳/CBD
汉来国际美食百货

口味：创意中餐
区域：朝阳/CBD
汉来国际美食百货

口味：创意中餐
区域：朝阳/CBD
汉来国际美食百货

口味：创意中餐
区域：朝阳/CBD

2、制作京东轮播图页面

京东轮播图

3、制作简略版新东方顶部导航菜单页面

新东方顶部导航菜单

憶yǐ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第七、八章作业

1.清除浮动的方法有哪几种？分别如何实现？4种1.浮动元素后面加空div2.设置父元素的高度3.父级添加overflow属性 overflow-hidden4.父级添加伪类after content:’’; display:block; clear:both;2.使用display：inline-block或float布局网页有什么区别？需要注意什么？display:inline-b...
复制链接

扫一扫