HTML 第八章：定位网页元素课后作业：

最新推荐文章于 2024-08-04 01:04:34 发布

gz98411

最新推荐文章于 2024-08-04 01:04:34 发布

阅读量8.1k

点赞数 4

分类专栏： HTML5 基础

本文链接：https://blog.csdn.net/gz98411/article/details/80813920

版权

本文主要探讨HTML中的定位技术，讲解如何使用CSS实现网页元素的精确布局。内容涵盖绝对定位、相对定位、固定定位等概念，并提供课后习题解答，帮助读者深入理解并应用这些技术。

摘要由CSDN通过智能技术生成

1.制作今日推荐页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SHOP 今日推荐</title>
       <style>
           #ys{width:300px;height:400px;margin:0px auto;border: 1px solid #388dff;border-radius: 8px}
           ul{list-style-type: none}
           a{color: red}
          span{color: red;font-size:14px}
           div p{font-size: 12px}
           h3{padding-left:30px;display:inline-block}
           ul,li{margin-left: -10px;margin-top: -10px}
           ul li img{padding: 10px 0px;}
       </style>
</head>
<body>
  <div id="ys">
     <h3><span>SHOP</span> 今日推荐</h3>
      <img src="more.gif" style="padding-left:90px"/>
      <ul>
          <li>
              <img src="img9.gif"/>
              <div style="float: right;padding-right:38px;line-height:10px;padding-top:10px;height:66px;;"><a href="#"><span>汉来国际美食百货</span></a>
              <p>口味：创意中餐</p>
              <p>区域：朝阳/CBD</p>
                  <img src="shen.png" style="position: relative;right:70px;