作业一学期三书八章

最新推荐文章于 2021-06-05 05:39:54 发布
最新推荐文章于 2021-06-05 05:39:54 发布
阅读量742 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sc13647346287/article/details/83819081
版权

3.制作美食今日推荐页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
    <link rel="stylesheet" href="DJ8word3.css" type="text/css">
</head>
<body>
<div class="whole">
    <div class="start">
        <h3><span>SHOP</span>今日推荐</h3>
        <a href="#"><img src="more.gif" alt="more"></a>
    </div>
    <ul>
        <li>
            <div class="one">
                <a href="#"><img src="img9.gif" alt="鸡腿" id="one"></a>
                <img src="shen.png" alt="" id="two">
            </div>
            <div class="two">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味:</span>创意中餐</p>
                <p><span>区域:</span>朝阳/CBD</p>
            </div>
            <div class="three">
                <a href="#"><img src="img7.gif" alt="鸡腿"></a>
            </div>
            <div class="two">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味:</span>创意中餐</p>
                <p><span>区域:</span>朝阳/CBD</p>
            </div>
            <div class="three">
                <a href="#"><img src="img8.gif" alt="鸡腿"></a>
            </div>
            <div class="two">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味:</span>创意中餐</p>
                <p><span>区域:</span>朝阳/CBD</p>
            </div>
            <div class="three">
                <a href="#"><img src="img7.gif" alt="鸡腿"></a>
            </div>
            <div class="two">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味:</span>创意中餐</p>
                <p><span>区域:</span>朝阳/CBD</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

body,div,a,p,ul,li,span,img,h3,h5{
    padding: 0px;
    margin: 0px;
}
li{
    list-style: none;
}
.whole{
    width: 280px;
    border: 1px #aacbee solid;
    height: 400px;
    margin: auto;
}
.start{
    position: relative;
    margin-bottom: 10px;
}
.start h3{
    margin-left: 20px;
}
.start span{
    color: red;
    margin-right: 5px;
}
.start a{
    position: absolute;
    right: 10px;
    top: 5px;
}
.one{
    position: relative;
    left: 30px;
    float: left;
    height: 90px;
}
.one #one{
    position: relative;
}
.one #two{
    position: absolute;
    left: 60px;
    top: -7px;
    z-index: 0;
}
.two{
    float: right;
    margin-left: 30px;
    position: relative;
    right: 30px;
    height: 90px;
}
.two h5{
    margin-bottom: 10px;
}
.two a{
    color: red;
    font-size: 14px;
}
.two p{
    font-size: 12px;
}
.two span{
    color: #999999;
}
.three{
    float: left;
    height: 90px;
    margin-left: 30px;
}

4.制作京东轮播图页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <link rel="stylesheet" href="DJ8word4.css" type="text/css">
</head>
<body>
<div>
    <img src="focus.jpg">
    <ul>
        <li class="one"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
</body>
</html>

body,ul,li{
    padding: 0px;
    margin: 0px;
}
div{
    width: 730px;
    height: 454px;
    position: absolute;
    margin: 100px 240px;
}
li{
    width: 20px;
    height: 20px;
    border: 1px dimgray solid;
    border-radius: 10px;
    text-align: center;
    background-color: dimgray;
    float: left;
    margin-right: 10px;
    list-style: none;
    position: relative;
    bottom: 30px;
    left: 300px;
}
.one{
    background-color: #FF6600;
    border: 1px #FF6600 solid;
}
a{
    color: #FFFFED;
    text-decoration: none;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <link rel="stylesheet" type="text/css" href="DJ8word5.css">
</head>
<body>
<div class="whole">
    <img src="logo.gif" id="one">
    <ul>
        <li><a href="#">购物车</a></li>
        <li><a href="#">优惠劵</a></li>
        <li><a href="#">快速注卡</a></li>
        <li><a href="#">各地购课</a></li>
        <li><a href="#">手机报</a></li>
        <li><a href="#" id="li">网站导航</a></li>
    </ul>
    <img src="open_icon.gif" id="two">
</div>
<div class="one">
    <ul class="three">
        <li><a href="#">托福</a></li>
        <li><a href="#">雅思</a></li>
        <li><a href="#">考研</a></li>
        <li><a href="#">称职英语</a></li>
        <li><a href="#">初中</a></li>
        <li><a href="#">日语</a></li>
    </ul>
    <ul class="four">
        <li><a href="#">网络课堂</a></li>
        <li><a href="#">咨讯中心</a></li>
        <li><a href="#">知识堂</a></li>
        <li><a href="#">大师讲堂</a></li>
        <li><a href="#">学习论坛</a></li>
        <li><a href="#">学词</a></li>
        <li><a href="#">考研搜校</a></li>
    </ul>
    <ul class="five">
        <li><a href="#">M-Zone</a></li>
        <li><a href="#">手机报</a></li>
        <li><a href="#">时时英语</a></li>
    </ul>
</div>
</body>
</html>

body,div,ul,li,a{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.whole{
    background: url("../Semester1book3DJ8/top_bg.gif");
    width: 620px;
    height: 30px;
    position: absolute;
}
#one{
    margin-left: 10px;
}
.whole li{
    margin-left: 10px;
    position: relative;
    left: 170px;
    bottom: 25px;
    float: left;
    font-size: 14px;
    border-right: #999 1px solid;
    padding-right: 10px;
}
.whole li:last-of-type{
    border: 0px;
}
.whole a{
    color: #7b7b7b;
    text-decoration: none;
}
#two{
    position: relative;
    left: 165px;
    bottom: 30px;
}
.one{
    width: 220px;
    height: 230px;
    border: 1px #999 solid;
    position: absolute;
    background: #fff;
    left: 370px;
    top: 25px;
    padding: 5px;
}
.three{
    width: 220px;
    height: 80px;
    border-bottom: 1px #000000 solid;
}
.three a{
    font-size: 12px;
    color: #999;
    margin: 10px;
    float: left;
}
.four{
    width: 220px;
    height: 110px;
    border-bottom: 1px #000000 solid;
}
.four a{
    font-size: 12px;
    color: #999;
    margin: 10px;
    float: left;
}
.five{
    width: 220px;
    height: 80px;
}
.five a{
    font-size: 12px;
    color: #999;
    margin: 10px;
    float: left;
}
一江风雪
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 第八章定位网页元素课后作业
tb19930719的博客
06-25 4705
HTML5 第八章定位网页元素课后作业 美食今日页面 &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;s
HTML5和CSS3开发第八章课后作业
suixinCaesar的博客
06-26 3218
3.制作SHOP今日推荐&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;style&gt; li{
第八章作业
qq_43028295的博客
11-15 584
一简答题 1.position属性有哪些属性值？他们在定位元素时，分别有那些特点? 答static：默认值，没有定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 2.z-index属性在网页定位中有什么作用？ 答：用于调整元素定位时重叠的上下位置。 3.制作美食今日推荐页面。 index.html ...
第八章
时刻的慌张的博客
11-13 1172
1.position属性有哪些属性值？他们在定位元素时，分别有哪些特点？ (1)absolute绝对定位:相对位置为父元素为非static的第一个父元素进行定位。 (2)fixed 固定定位:相对于浏览器窗口进行定位。 (3)relative相对定位:相对于其正常（默认布局）位置进行定位。 (4)static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, ri...
创建折叠式导航菜单
孤独剑的架构师之路
04-28 1166
Untitled Document  function formHandler() { var URL = document.form.site.options [document.form.site.selectedIndex].value; window.location.href = URL; // End --> 
2021第一学期C语言课程作业汇总
03-04
在2021年第一学期的C语言课程中，学生们通过一系列作业深入学习了这门语言，涵盖了基础到进阶的知识点。 一、C语言基础 C语言的基础包括变量、数据类型、运算符和控制结构。变量是存储数据的容器，有整型(int)、...
东南大学计算机系短学期MFC作业 西文图书馆
12-06
这篇资料主要涵盖了东南大学计算机系在短学期中的一项MFC（Microsoft Foundation Classes）作业，主题是构建一个西文图书馆管理系统。MFC是微软提供的一套C++类库，用于简化Windows应用程序的开发，它提供了丰富的...
一年级下学期少先队工作计划书.docx
11-15
【一年级下学期少先队工作计划书】 在一年级下学期的少先队工作中，主要的目标是根据学校的德育训练思路，围绕少先队的核心任务，针对孩子们的实际需求，设计并实施一系列富有童趣和教育意义的活动。这些活动旨在...
网页顶部导航菜单
06-29
网页顶部导航菜单，简易CSS样式，宽度，高度可自行调整。
顶部固定导航菜单代码.zip
07-04
顶部固定导航菜单代码基于jQuery实现，导航菜单始终在页面顶部定位效果，很常见的效果，非常实用；鼠标滑动滚动条时，导航固定顶部，并且滚动到对应 的栏目菜单时，当前导航高亮显示；点击导航文字时平滑跳转到对应的栏目板块。有二手车旗舰店、车源保证、价格透明、过户便捷、分期付款、售后质保等栏目菜 单。
前端页面美食天下网页——css布局说明文档
05-09
前端页面美食天下网页——css布局说明文档，单纯的css页面
HTML-新东方出国留学教育专题网页模板
06-08
新东方出国留学教育专题网页模板，单页多栏目设计，包括英国中学特色、英国中学分布、英国学制介绍、英国中学优势、录取榜、英国名校介绍、顾问展示、推荐活动、返回顶部等栏目
html+css导航栏案例展示
04-17
html+css导航栏案例展示。
html如何设置导航栏例子,纯css实现导航条（顶部菜单）
weixin_39782832的博客
06-05 543
【实例简介】入门级示例源码【实例截图】【核心代码】* {margin: 0;padding: 0;}.top {/* 设置宽度高度背景颜色 */height: auto;width: 100%;background: #178fe5;position: fixed;/*固定在顶部*/top: 0;/*离顶部的距离为0*/text-align: center;}.top ul {/* 清除ul标签的...
自定义顶部菜单navigationBar方式
qq_40666120的博客
06-12 2099
前言： 开发中，设计师也是奇思妙想，把小程序顶部的默认菜单改成了自己觉得好看的样式，改了返回icon的样式，加了各种返回首页、收藏、什么鬼的按钮，甚至把胶囊按钮都给改了~~~，好吧，遵从设计师的审美，盘他（除了胶囊按钮）（本文字数较多，因为我把每一步都分的很细，都写出来了，望客官细品，仔细品） 要点概述：（助于童鞋们更好的理解） 1.小程序默认的navigationBar是占据手机顶部区域的，小程序的页面内容page的显示区域是从navigationBar之下开始，如下图，红框圈出来的就是小程序默认的nav
自定义顶部导航栏-搜索、菜单功能
青铜五程序猿的博客
07-23 924
react native 自定义顶部导航菜单 在用rn开发过程中，需要统一定制顶部导航栏，由于每个页面都要写，避免麻烦，因此执自行封装了该导航工具。详细代码如下 使用方式： 在页面中引用该组件，并通过以下方式调用： <TopView title={‘标题’} rightIcon={‘search2’} //搜索按钮的字体图标 rightMenueIcon={‘menu’} //菜单字体图标...
静态网页的制作（美食美刻）
weixin_43627723的博客
04-06 9599
静态网页制作步骤： 1. 创建一个完整网络目录结构 一个文件夹：管理当前网站中所有的文件 index.html/default.html（文件）：当前网站的入口文件 css（文件夹）：管理当前网站中所有的css文件 js（文件夹）：管理当前网页中所有的js文件 images（文件夹）：管理当前网站中所有的图片 2. 准备一张PSD（用于转换成html页面的设计图） 3. 确定一种开发方式 a) ...
写一个标准的一个学期的学校计划
最新发布
03-02
一个标准的学期学校计划通常包括以下内容： 1. 课程列表：列出学期中的所有课程名称，包括必修课程和选修课程。对于每个课程，应包括授课教师姓名和联系方式。 2. 时间表：制定一个学期的时间表，包括每周的上课...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值