慕课网——CSS作业练习题

最新推荐文章于 2024-09-29 19:00:03 发布
最新推荐文章于 2024-09-29 19:00:03 发布
阅读量1.4k 收藏 10
点赞数
文章标签： html css 排版布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41754739/article/details/79452874
版权

作业地址：点击打开链接

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css慕课网作业</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <!-- 顶部 -->
    <div class="top">
        <!-- logo -->
        <div class="logo">
            <a href="#"><img src="img/logo.png" alt="logo"></a>
        </div>
        <!-- 右侧导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">FACULTY</a></li>
                <li><a href="#">EVENTS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
        <!-- 背景图片 -->
        <img src="img/banner3.jpg" alt="banner">
        <!-- 遮罩层 -->
        <div class="topLayer"></div>
        <!-- 最上层内容 -->
        <div class="btn">
            <form action="">
                <input type="text" name="username" placeholder="your Name">
                <input type="text" name="userphone" placeholder="your Phone">
                <input type="text" name="useremail" placeholder="your Email">
                <textarea name="comment" placeholder="Write Your Comment Here" class="textarea"></textarea>
                <button>SEAD MESSAGE</button>
            </form>
        </div>
    </div>
    <!-- about区 -->
    <div class="about">
        <!-- about上半部分 -->
        <div class="about-top">
            <div class="about-top-content">
                <div class="about">ABOUT</div>
                <i class="i"></i>
                <div class="text1">Lorem Ipsum is simply dummy text of the printing and typesetting <br/>industry.Lorem Ipsum has been the industry's standard dummy <br/>text ever since the 1500s</div>
                <span class="word">A WORD <br/>ABOUT US</span>
                
                <div class="pic"><img src="img/bb3.jpg" alt="pic"></div>

                <div class="text2">
                    <div class="text2-content">
                          <p>Praesent dignissim viverra est,sed <br/> bibendum ligula congue non.Sed ac nisl <br/>et felis gravida commodo?Suspendisse<br/>eget ullamcorper ipsum.Suspendisse<br/>diam amet</p>
                          <button>EXPLOER</button>
                    </div>
                </div>

                <div class="student">
                    <span class="tit">70000</span>
                    <i class="i"></i>
                    <span class="txt">Students</span>
                </div>

                <div class="faculty">
                    <span class="tit">600</span>
                    <i class="i"></i>
                    <span class="txt">Faculty</span>
                </div>
            </div>
        </div>
        <!-- about下半部分 -->
        <div class="about-bottom">
           <div class="about-item item1"></div>
           <div class="about-item item2">
               <div class="about-item-content">
                   <span class="title">Library</span>
                   <p class="content-1">Lorem Ipsum is simply dummy text of the <br/>printing and typesetting industry</p>
                   <p class="content-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a  galley of type and scrambled it to make a type specimen book.</p>
                   <button>EXPLOER</button>
               </div>
           </div>
           <div class="about-item item3"></div>
           <div class="about-item item4">
               <div class="about-item-content">
                   <span class="title">Computer Lab</span>
                   <p class="content-1">Lorem Ipsum is simply dummy text of the <br/>printing and typesetting industry</p>
                   <p class="content-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a  galley of type and scrambled it to make a type specimen book.</p>
                   <button>EXPLOER</button>
               </div>
           </div>
           <div class="about-item item5">
               <div class="about-item-content">
                   <span class="title">Conference Hall</span>
                   <p class="content-1">Lorem Ipsum is simply dummy text of the <br/>printing and typesetting industry</p>
                   <p class="content-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a  galley of type and scrambled it to make a type specimen book.</p>
                   <button>EXPLOER</button>
               </div>
           </div>
           <div class="about-item item6"></div>
           <div class="about-item item7">
               <div class="about-item-content">
                   <span class="title">Play Ground</span>
                   <p class="content-1">Lorem Ipsum is simply dummy text of the <br/>printing and typesetting industry</p>
                   <p class="content-2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a  galley of type and scrambled it to make a type specimen book.</p>
                   <button>EXPLOER</button>
               </div>
           </div>
           <div class="about-item item8"></div>
        </div>
    </div>
   <!-- gallery区 -->
    <div class="gallery">
        <div class="gallery-top">
            <div class="about">GALLERY</div>
            <i class="i"></i>
            <div class="text1">Lorem Ipsum is simply dummy text of the printing and typesetting <br/>industry.Lorem Ipsum has been the industry's standard dummy <br/>text ever since the 1500s</div>
        </div> 
        <div class="gallery-bottom">
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic1"><img src="img/03-01.jpg" alt="pic"></div>
                <div class="gallery-bottom-top">  SCIENCE LAB</div>
            </div>
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic2"><img src="img/03-02.jpg" alt="pic"></div>       
                <div class="gallery-bottom-top">  INDOOR STADIUM</div>
            </div>
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic3"><img src="img/03-03.jpg" alt="pic"></div>       
                <div class="gallery-bottom-top">  TRANSPORTATION</div>
            </div>
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic4"><img src="img/03-04.jpg" alt="pic"></div>
                <div class="gallery-bottom-top">  KIDS ROOM</div>
            </div>
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic5"><img src="img/03-05.jpg" alt="pic"></div>
                <div class="gallery-bottom-top">  MEDITATION CLASSES</div>
            </div>
            <div class="gallery-bottom-item">
                <div class="gallery-pic pic6"><img src="img/03-06.jpg" alt="pic"></div>
                <div class="gallery-bottom-top">  KIDS PLAYGROUND</div>
            </div>
        </div> 
    </div>
    <!-- footer区 -->
    <div class="footer">
        <p>&copy;2016 imooc.com 京ICP备13046642号</p>
    </div>
</body>
</html>

CSS：

/*css reset*/
* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei UI";
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
}

/*通用样式设置*/
.i {
    display: block;
    height: 3px;
    width: 40px;
    background-color: #07cbc9;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 15px;
} 

/*top样式*/
.top {
    width: 100%;
    height: 80px;
    background: #07cbc9;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.top .logo {
    width: 250px;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    margin-left: 80px;
}

.top .nav {
    height: 80px;
    float: right;
}

.top .nav ul {
    margin-right: 80px;
}

.top .nav li {
    float: left;
    width: 80px;
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    padding-left: 5px;
    cursor: pointer;
}

.top .nav li:hover {
    background: #333;
}

/*banner样式*/
.banner {
    height: 500px;
    width: 100%;
    position: relative;
    margin-top: 80px;
}

.banner img {
    height: 500px;
    width: 100%;
    position: relative;
}
.banner .topLayer {
    background-color: #000;
    opacity: 0.5;
    z-index: 1;
    position: absolute;
    top: 0;
    height: 500px;
    width: 100%;
}

.banner .btn {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    left: 50%;
    margin-left: -200px;
    z-index: 2;
}

.banner .btn form {
    width: 400px;
    height: 300px;
}

.banner .btn input {
    width: 398px;
    height: 30px;
    background: transparent;
    margin-bottom: 15px; 
    outline: none;
    border-color: #ccc;
    color: #fff;
}

.banner .btn textarea {
    width: 100%;
    height: 80px;
    background: transparent;
    margin-bottom: 20px;
    outline: none;
    border-color: #ccc;
    color: #fff;
}

.banner .btn button {
    display: block;
    margin: 0 auto;
    width: 120px;
    height: 40px;
    text-align: center;
    background: transparent;
    outline: none;
    border-color: #ccc;
    color: #fff;
    cursor: pointer;
}

.banner .btn input:hover,
.banner .btn textarea:hover {
    border-color: #07cbc9;
}

.banner .btn button:hover {
    background-color: #07cbc9;
    border: none;
}

/*about样式*/
.about  {
    position: relative;
    height: 1000px;
}

.about .about-top {
    height: 500px;
    background: #fff;
    position: relative;
}

.about .about-top-content {
    width: 800px;
    height: 400px;
    position: absolute;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -400px;
}

.about .about-top-content .about {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 40px;
    font-weight: bold; 
}

.about .about-top-content .text1 {
    width: 400px;
    height: 80px;
    text-align: center;
    font-size: 12px;
    margin: 0 auto;
}

.about .about-top-content .word {
    display: block;
    font-size: 30px;
    margin: 0 10px;
}

.about .about-top-content .text2 {
    position: absolute;
    width: 300px;
    height: 160px;
    background: rgba(255,255,255,.3); 
    border: 1px #ccc solid;
    z-index: 9;
}

.about .about-top-content .text2 .text2-content {
    margin: 15px;
}

.about .about-top-content .text2 .text2-content p {
    font-size: 14px;
}

.about .about-top-content .text2 button {
    width: 80px;
    height: 30px;
    color: #fff;
    background-color: #000;
    border: none;
    display: block;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

.about .about-top-content .text2 button:hover {
    background-color: #fff;
    color: #000;
    border: 1px #000 solid;
}


.about .about-top-content .pic {
    width: 400px;
    height: 260px;
    position: absolute;
    bottom: 0px;
    left: 200px;
    /*background: url(../img/bb3.jpg) no-repeat center;*/
}

.about .about-top-content img {
    width: 400px;
    height: 260px;
}
.about .about-top-content .student,
.about .about-top-content .faculty {
    border: 1px #07cbc9 solid;
    width: 160px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 140px;
    text-align: center;
}

.about .about-top-content .faculty {
   top: 260px; 
}

.about .about-top-content .tit {
    font-size: 30px;
    font-weight: bold;
    display: block;
    margin: 10px 0 5px;
}

/*about 下半部分样式*/
.about .about-bottom {
    width: 100%;
    height: 500px; 
}

.about-item {
    float: left;
    height: 250px;
    width: 25%;
    background-color: #07cbc9;
}

.about .about-bottom .item1 {
    background: url(../img/b1.jpg) no-repeat center;
}

.about .about-bottom .item3 {
    background: url(../img/b2.jpg) no-repeat center;
}

.about .about-bottom .item6 {
    background: url(../img/b3.jpg) no-repeat center;
}

.about .about-bottom .item8 {
    background: url(../img/b4.jpg) no-repeat center;
}


.about-bottom .about-item-content {
    margin: 25px;
}

.about-bottom .about-item-content .title {
    color: #fff;
    font-size: 20px;
}

.about-bottom .about-item-content .content-1 {
    color: #fff;
    font-size: 12px;
    margin-top: 10px;
}

.about-bottom .about-item-content .content-2 {
    color: #fff;
    font-size: 10px;
    margin-top: 10px;
}

.about-bottom .about-item-content button {
    width: 80px;
    height: 30px;
    color: #fff;
    background-color: #000;
    border: none;
    display: block;
    margin: 15px auto 0 auto;
    cursor: pointer;
}

.about-bottom .about-item-content button:hover {
    background-color: #07cbc9;
    border: 1px #000 solid;
}

/*gallery样式*/
.gallery {
    width: 100%;
    height: 600px;
    background: #fff;
    position: relative;
}

.gallery .gallery-top .about {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 40px;
    font-weight: bold; 
    margin-top: 40px;
}

.gallery .gallery-top .text1 {
    width: 400px;
    height: 80px;
    text-align: center;
    font-size: 12px;
    margin: 0 auto;
}


.gallery .gallery-bottom {
    width: 806px;
    height: 400px;
    margin: 0 auto;
}

.gallery .gallery-bottom .gallery-bottom-item {
    width: 246px;
    height: 180px;
    margin: 10px;
    float: left;
    position: relative;
}

.gallery .gallery-bottom .gallery-bottom-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    position: absolute;
    bottom: 0;
    color: #fff;
}

.gallery .gallery-bottom .gallery-pic {
    width: 100%;
    height: 140px;
}

.gallery .gallery-bottom .gallery-pic img {
    width: 100%;
    height: 140px;
}

/*footer样式*/
.footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #07cbc9;
    color: #fff;
}


捕鱼麦大叔
关注
CSS练习题（居中五环 | 两栏布局 | 两个经典bug | BFC | 浮动元素）
m0_53222768的博客
12-14 1723
一、居中五环（html+css） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head> <body> <div class="
CSS——CSS权重计算测试题
流楚丶格念的博客
06-29 4727
1 <title>第1题</title> <style type="text/css"> #father #son{ color:blue; } #father p.c2{ color:black; } div.c1 p.c2{ color:red; } #father{ color:green !important; /* 继承的权重为0 */ } </styl
慕课网作业
天真小白的成长记录
10-15 1173
//感觉集成度太高了，这是最简单的办法，有空再分成板块来写吧。 import java.util.Scanner; public class CarRentingSystem { static int carRent; //车的租金 static int carNumber; //车的数量 static int carRentalDays; //租车天数
第4章 CSS样式基础作业
最新发布
2302_80572539的博客
09-29 252
1.使用 HBuilder编写符合以下要求的文档：在浏览器窗口中显示超链接文字“WELCOME”。其中上边div的背景颜色为#FF99CC，文字居中显示；水平分割线粗细为5，颜色为#FF99CC；超链接文字的字体为“arial black”，字号为60px，颜色为#FFF，无下划线；脚部文字颜色为#666。2.使用HBuilder编写符合以下要求的文档：使用所给素材文件夹中的hwbanner.png和文字。根据网页效果，使用h1，h2，设置标题。“为客户创造价值”等语句，使用内联样式，加粗，加大。
html5+css页面(慕课网第一份页面作业)
03-27
本资源是针对慕课网上线课程HTML5+CSS3实现动态网页的作业1进行编写的。
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
飛天网事
09-23 6650
1. DIV + CSS 练习：太极阴阳图。  基本思路：由三个div块元素组成；  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  （太极阴阳图：上为阳下为阴或左为阳又为阴）     2. 太极阴阳图底图#taiji：  巧用边框：宽度0高度300px，左右边框150分别150px；然后圆角处理作圆形。
html、css练习题
zyz00000000的博客
09-12 6878
1. 网络慢的时候，会只加载html内容，不加载css样式，页面只显示html的文字内容。    显示的效果：  解决办法（1）： a { display: inline-block; width: 190px; height: 140px; border: 1px solid black; background-image: url(ht...
网页制作课作业基于HTML+CSS+JavaScript+jquery仿慕课网教学培训网站设计实例 企业网站制作
08-10
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/muke.css"> ...
基于慕课官网的JavaScript、CSS、HTML仿制设计源码
09-26
该项目为慕课官网的仿制设计源码，包含99个文件，涵盖54个JavaScript文件、23个JPEG图片文件、5个GIF图片文件、4个PNG图片文件、4个JavaScript库文件、2个Markdown文档文件、2个CSS样式文件以及1个HTML文件，旨在...
CSSCheckStyle——CSS的解析、检查、修复和压缩
03-02
《人人FEDCSS编码规范》中，对CSS的编写方式进行了严格的约束和说明，但是如何在实际开发过程中，确保代码能够严格遵循规范的要求，是规范制定者必须要考虑的问题。人为遵守规范，是规范制定的初衷，也是最终目标，...
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
HTML+CSS学习时课本上一些练习
weixin_33985679的博客
04-21 99
这是我学习HTML+CSS时按照书上的例子做的练习，如果不想自己动手写的话，可以用用。 转载于:https://blog.51cto.com/yuzwei/1636656
慕课网JAVA基础第二季最后的一个作业
powersn的Java之旅
12-07 1025
package com.imooc; import java.util.Scanner; //创建一个Car类 public class Car { String name ; int pay ; int id; int huo; int ke; public Car(int id,String name,int pay,int huo,int ke){ this.id =
在慕课学习HTML与CSS基础课程的一些笔记
anmo1221的博客
07-17 340
1、 相对于浏览器窗口，设置图片垂直居中。 2、当li设置为行内元素ul没有设置时，ul元素分行显示。 当li和ul都设置为行内元素时，元素显示在一行。 当li没有设置为行内元素，无论ul设置为行内元素与否，元素都分行显示 3、像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”） 4、但注意有一些css样式是不具有继承性的。如border:1px
html css作业
qq_40859235的博客
07-29 6462
根据所给商品图片，做一个类似如下图所示的小米商城的页面 想法： 运用上课学的知识，我决定先建一个主盒子，再在主盒子中分左右两个盒子，右边的盒子再分上下两个盒子，里面的八个商品浮动加间距即可。 大致写出来是这个效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt...
慕课WEB编程技术(第三章.单元测试)
weixin_42473228的博客
02-28 2732
慕课西安交通大学.WEB编程技术.第三章.CSS.单元测试0 目录3 CSS3.1 单元测试3.1.1 课堂重点3.1.2 测试与作业4 下一章 0 目录 3 CSS 3.1 单元测试 3.1.1 课堂重点 3.1.2 测试与作业 1单选(2分)CSS是层叠样式表，它主要关注网页的（）。 A.都不是B.表示形式C.内容及表示形式D.内容 正确答案:B 2单选(2分)下列不属于CSS的引入方式...
css学习练习题01：css
SH_思寒的博客
09-06 250
css学习练习题01： css： 链接：https://pan.baidu.com/s/1WvmX-KpWZtr_5CSYvT4UYA 提取码：h6pg
2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）
weixin_43759874的博客
02-15 684
CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内； 单独文件（外部式样式表文件） 也是在head标签内插入超链接，sublime+emmet可以用link:css+快捷键实现 CSS的选择器类型 1.标签选择器 2.**类别选择器** 3.ID选择器 注：id选择器应当具有唯一性。 4.嵌套声明 5.集体声明 6.全局...
慕课网 初识 HTML+CSS 学习笔记 —— 第八章 CSS选择器
m8705的博客
02-24 487
第8章 CSS选择器 8-1什么是选择器？ 每一条css样式声明（定义）由两部分组成，形式如下： 选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 比如下面代码中第7行代码中的“body”就是选择器。 （可以回顾 6-3 CSS代码语法中的内容） 8-2标签选择器 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值