前端入门到熟悉day05

最新推荐文章于 2023-03-09 20:05:30 发布

小忆（华仔）

最新推荐文章于 2023-03-09 20:05:30 发布

阅读量153

点赞数

分类专栏：前端 css3 html5

本文链接：https://blog.csdn.net/weixin_44160944/article/details/85268160

版权

前端同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

css3

31 篇文章 0 订阅

订阅专栏

html5

31 篇文章 0 订阅

订阅专栏

学成在线（网页）

<!DOCTYPE html>

<head>

<title>学成在线教育平台-不是每个网站都叫学成在线</title>

</head>

<body>

<h1>

</h1>

</div>

<nav>

<ul>

</ul>

</nav>

</div>

<dl>

<dd>

<s>

</s>

<span>

刘德华 andy

</span>

</dd>

</dl>

</div>

</header>

<ul>

</ul>

<ul>

</ul>

</div>

<i></i>

</div>

<dl>

<dt>我的课程表</dt>

<dd>

<ul>

<li>

<h5>继续学习程序语言设计</h5>

</li>

<li>

<h5>继续学习程序语言设计</h5>

</li>

<li>

<h5>继续学习程序语言设计</h5>

</li>

</ul>

</dd>

</dl>

</div>

<strong>精品推荐</strong>|

<a href="#">jQuery</a> |

</div>

</div>

</div>

<ul>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

<li>

</div>

Think PHP 5.0 博客系统实战项目演练

</div>

<p>

<span>高级</span> • 1125人在学习

</p>

</li>

</ul>

</div>

<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>

<a href="#" id="">下载APP</a>

</div>

<dl>

<dt>关于学成网</dt>

</dl>

<dl>

<dt>关于学成网</dt>

</dl>

<dl>

<dt>关于学成网</dt>

</dl>

</div>

</footer>

</body>

</html>

* @Author: andy

* @Date: 2017-12-18 09:34:47

* @Last Modified by: andy

* @Last Modified time: 2017-12-18 09:34:47

margin:0;

padding:0;

box-sizing: border-box; /* css3 盒子模型 */

}

em,i{

font-style:normal;

}

li{

list-style:none;

}

img{

border:0;

vertical-align:middle;

}

button{

cursor:pointer;

}

color:#050505;

text-decoration:none;

}

a:hover{

color:#c81623;

}

button,input{

font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;

}

body{

-webkit-font-smoothing:antialiased;

background-color:#fff;

font:12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;

color:#666;

}

.hide,.none{

display:none;

}

.clearfix:after{

visibility:hidden;

clear:both;

display:block;

content:".";

height:0;

}.clearfix{

*zoom:1;

}

/* 版心 */

.w {

width: 1200px;

margin: auto;

}

* @Author: andy

* @Date: 2017-12-18 09:36:01

* @Last Modified by: andy

* @Last Modified time: 2017-12-18 09:36:01

body {

background-color: #f3f5f7;

}

header {

width: 1300px;

height: 100px;

/* background-color: pink; */

margin: 0 auto;

padding-top: 30px;

}

.logo {

width: 195px;

height: 42px;

/* background-color: purple; */

float: left;

}

.logo a {

display: block;

width: 195px;

height: 42px;

background: url(../images/logo.png) no-repeat;

text-indent: -990px;/* 隐藏链接里面的文字 */

overflow: hidden; /* 这句话加上想必也是极好的 */

}

nav {

float: left;

margin-left: 20px;

}

nav li {

float: left;

height: 40px;

line-height: 40px;

margin-left: 25px;

}

nav li a {

display: block;

height: 40px;

font-size: 18px;

padding: 0 10px;

}

nav li a:hover {

border-bottom: 2px solid #00a4ff;

}

.search {

width: 410px;

height: 40px;

background-color: purple;

float: left;

margin-left: 160px;

}

.search input {

width: 361px;

height: 40px;

border: 1px solid #00a4ff;

outline: none; /* 轮廓线 */

padding-left: 10px;

float: left;

}

.search button {

width: 49px;

height: 40px;

border: 0;

outline: none;

float: left;

background: url(../images/fa-search.png) no-repeat;

}

.personal {

float: right;

height: 40px;

line-height: 40px;

}

.personal dt, .personal dd {

float: left;

}

.personal s {

position: relative;

/* padding: 20px; */

padding: 0 20px;

text-decoration: none;

}

.personal s::before {

content: "";

display: block; /* 因为伪元素默认的是行内元素 */

width: 6px;

height: 6px;

background-color: red;

border-radius: 50%;

position: absolute;

right: 15px;

top: 0;

}

.personal span img {

border-radius: 50%;

margin-right: 10px;

transition: all 0.6s;

}

.personal span img:hover {

transform: rotate(-360deg);

}

/* banner部分 */

.banner {

height: 420px;

background-color: #1c036c;

}

.inner {

height: 420px;

position: relative;

}

.subnav {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 190px;

background: rgba(0, 0, 0, .3);

padding-top: 20px;

}

.subnav li {

padding-left:20px;

position: relative;

height: 40px;

line-height: 40px;

}

.subnav a {

font-size: 14px;

color: #fff;

display: block;

}

.subnav a:hover {

color: #00b4ff;

}

.subnav span {

position: absolute;

right: 20px;

top: 0;

}

.circle {

width: 176px;

height: 20px;

/* background-color: #fff; */

position: absolute;

left: 50%;

/* margin-left: -88px; == 下面 */

transform: translate(-50%);

bottom: 15px;

}

.circle i {

display: inline-block;

width: 13px;

height: 13px;

background: rgba(255, 255, 255, 0.4);

margin: 0 5px;

border-radius: 6px;

cursor: pointer;

transition: all 0.4s;

}

.circle i:hover {

width: 20px;

background-color: #fff;

}

.timebook {

width: 228px;

height: 300px;

position: absolute;

right: 0;

top: 50%;

/* transform: translate(0, -50%); */

transform: translateY(-50%);

/* 但是y 要大写才可以 */

background-color: #fff;

}

.timebook dt {

height: 50px;

background-color: #9bceea;

font-weight: 700;

color: #fff;

line-height: 50px;

font-size: 18px;

text-align: center;

}

.timebook dd {

padding: 15px 20px 0;

}

.timebook dd li {

height: 60px;

border-bottom: 1px solid #ccc;

/* background-color: pink; */

padding-top: 6px;

}

.timebook dd li:last-child {

border: 0;

}

.timebook h5 {

font-size: 16px;

font-weight: normal;

}

.all {

height: 40px;

border: 1px solid #22b0ff;

color: #22b0ff;

display: block;

text-align: center;

line-height: 40px;

font-size: 16px;

}

.all:hover{

background-color: #22b0ff;

color:#fff;

}

.recommend {

margin-top: 10px;

background-color: #fff;

height: 60px;

line-height: 60px;

position: relative;

box-shadow: 0px 1px 12px rgba(0, 0, 0, .4);

}

.rec-l {

padding-left: 30px;

}

.rec-l strong {

color: #22b0ff;

font-size: 14px;

margin-right: 15px;

}

.rec-l a {

margin: 0 15px;

font-size: 14px;

}

.recommend em {

position: absolute;

right: 20px;

bottom: 0;

}

.products {

margin-top: 30px;

}

.pro-hd {

height: 40px;

position: relative;

}

.pro-hd h4 {

font-weight: normal;

font-size: 18px;

}

.pro-hd a {

position: absolute;

top: 0;

right: 20px;

}

.pro-bd li {

width: 228px;

height: 270px;

overflow: hidden;

background-color: #fff;

float: left;

margin-right: 15px;

margin-bottom: 15px;

transition: all 0.4s;

}

.pro-bd li:hover {

box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);

transform: translateY(-10px);

}

.pro-bd li:nth-child(5n) {

margin-right: 0;

}

.pic img {

transition: all 0.4s;

}

.pic img:hover {

margin-left: -5px;

}

.pro-title {

width: 185px;

margin: 20px auto;

font-size: 14px;

color: #050505;

}

.pro-bd p {

width: 185px;

margin: 20px auto;

color: #999;

}

.pro-bd p span {

color: #ff7c2d;

}

footer {

height: 420px;

background-color: #FFF;

margin-top: 30px;

padding-top: 30px;

}

.footer-l {

margin-left: 20px;

float: left;

}

.footer-l p {

margin: 25px 0 15px 0;

line-height: 24px;

}

.footer-l a {

width: 120px;

height: 35px;

display: block;

border: 1px solid #22b0ff;

text-align: center;

line-height: 35px;

color: #22b0ff;

}

.footer-r {

float: right;

}

.footer-r dl {

float: left;

margin-left: 130px;

}

.footer-r dl dt {

font-size: 14px;

color: #333;

height: 30px;

}

.footer-r dd {

height: 20px;

}

最后一关（闯关）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box {

width: 1000px;

background-color: aqua;

margin: 0 auto;

box-sizing: border-box;

padding: 20px;

overflow: hidden;

}

.div-left {

width: 65%;

background-color: blue;

float: left;

}

.div-right {

width: 30%;

float: right;

}

.container {

width: 100%;

background-color: black;

padding: 10px;

overflow: hidden;

}

.container-l {

width: 25%;

height: 150px;

background-color: brown;

float: left;

}

.container-r {

width: 70%;

height: 150px;

background-color: chartreuse;

float: left;

margin-left: 1%;

}

.top,

.center,

.bottom {

background-color: cornsilk;

width: 100%;

}

.top {

height: 30%;

}

.center {

height: 43%;

margin: 1% 0;

}

.bottom {

height: 20%;

}

.right-t {

height: 30px;

width: 100%;

background-color: pink;

margin-right: 20px;

}

.right-t1 {

height: 17px;

width: 100%;

background-color: mistyrose;

margin-right: 20px;

margin-top: 20px;

}

.center-b {

width: 100%;

margin-top: 30px;

overflow: hidden;

margin-bottom: 20px;

}

.center-c {

width: 30%;

height: 57px;

background-color: olive;

float: left;

margin: 0 5% 5% 0;

}

.center-c:nth-child(3n) {

margin-right: 0;

}

.right-c {

overflow: hidden;

margin-bottom: 30px;

margin-top: 30px;

}

.right-c1 {

width: 100%;

height: 70px;

background-color: lightpink;

}

.right-c2 {

width: 100%;

height: 40px;

background-color: red;

}

.bottom-1 {

overflow: hidden;

margin-top: 20px;

}

.bottom-2 {

width: 40%;

height: 80px;

background-color: #fff;

float: left;

}

.bottom-3 {

width: 55%;

height: 80px;

float: left;

margin-left: 5%;

}

.bottom-3-1 {

width: 100%;

height: 20%;

background-color: #fff;

margin-bottom: 5%;

}

.bottom-3-2 {

width: 100%;

height: 70%;

background-color: #fff;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="bottom-3-2">bottom</div>

</div>

</body>

</html>

然后做官网（作业）

<!DOCTYPE html>

<head>

<title>名企合作-靖凯开源官网</title>

<style>

* {

margin: 0;

padding: 0;

}

text-decoration: none;

color: black;

display: block;

}

ul{

list-style: none;

}

/* 头部 */

.header {

width: 100%;

overflow: hidden;

height: 104px;

background-color: #fff;

position: relative;

}

.header-l{

float: left;

position: absolute;

overflow: hidden;

}

.header-logo{

float: left;

margin: 0 auto;

padding-left: 30px;

box-sizing: border-box;

height: 104px;

}

.header-nav{

width: 600px;

overflow: hidden;

}

.header-nav li{

float:left;

margin-left: 40px;

height: 104px;

display: inline-block;

line-height: 104px;

}

.header-nav li a{

font-size: 14px;

display: block;

}

.header-nav li a:hover{

color:skyblue;

}

.header-nav .bb{

box-sizing: border-box;

}

.header-nav li .c{

color: skyblue;

}

.header-r{

float: right;

margin-right: 20px;

}

.header-r a{

float: left;

}

.header-r .search{

overflow: hidden;

width: 230px;

height: 50px;

margin-top: 30px;

border-color: rgba(0,0,0,.2);

border-style: solid;

background-color: #fff;

}

.header-r .search input{

float: left;

overflow: hidden;

width: 157px;

height: 48px;

line-height: 48px;

padding-left: 14px;

background-color: transparent;

border: none;

font-size: 13px;

}

.header-r .search button{

width: 51px;

height: 48px;

border: none;

background: url(images/icon-search.png) no-repeat center;

text-align: center;

float: right;

cursor: pointer;

}

/* 头部结束 */

/* 轮播 */

.banner img {

width: 100%;

height: 270px;

}

/* 轮播结束 */

/* 内容 */

.content{

overflow: hidden;

}

.content .content-l{

float: left;

overflow: hidden;

width: 320px;

height: 310px;

background-color:rgba(0,0,0,.05);

margin: 20px;

}

.content-l span {

font-size: 14px;

display: block;

margin: 20px;

}

.contennt-l ul{

width: 250px;

}

.content-l ul li{

float: left;

width: 140px;

height: 60px;

margin: 5px;

overflow: hidden;

}

.content-l ul li img{

float: left;

margin: 10px;

}

.content .content-r{

float: right;

}

.content-search {

width: 800px;

height: 80px;

float: left;

margin: 30px;

}

.content-search input {

width: 560px;

height: 50px;

border: 1px solid #00a4ff;

outline: none; /* 轮廓线 */

padding-left: 10px;

float: left;

}

.content-search button {

width: 80px;

height: 50px;

border: 0;

background-color: #00a4ff;

outline: none;

float: left;

}

.content-search button span{

color: #fff;

size: 14px;

}

.content-nav li{

float:left;

margin-left: 40px;

display: inline-block;

}

.content-nav li a{

font-size: 14px;

display: block;

}

.content-nav li a:hover{

border-bottom: 2px solid #00a4ff;

}

.hr{

border-bottom: 0.5px solid grey;

float: left;

width: 100%;

}

.content-ul{

overflow: hidden;

width: 100%;

}

.contennt-ul li{

float: left;

width: 100%;

overflow: hidden;

}

.content-nav-c{

overflow: hidden;

border-bottom: 1px dashed grey;

}

.content-nav-c-l{

float: left;

margin: 20px;

}

.name{

color:skyblue;

margin:20px 0;

}

.money{

color: red;

}

.content-nav-c-r{

float: right;

overflow: hidden;

}

.content-nav-c-r-l{

float: left;

}

.content-nav-c-r-l span {

display:inline-block;

background-color:rgba(0,0,0,.2);

color: grey;

}

.content-nav-c-r-r{

float: right;

}

.content-nav-c-r-r img{

width: 150px;

height: 100px;

}

.content-last{

overflow: hidden;

}

.content-last li{

float: left;

border: 1px solid grey;

background-color: #fff;

margin: 30px;

width: 80px;

height: 25px;

text-align: center;

color: grey;

}

.content-last li a{

display: inline-block;

width: 100%;

height: 100%;

}

.content-last li a:hover{

background-color: skyblue;

color: #fff;

}

.content-last .active{

background-color: skyblue;

font-color: #fff;

}

/* 内容结束 */

/* 尾部 */

.big-logo{

width: 100%;

}

.big-logo img{

margin-top: 85px;

padding-top: 30px;

padding-bottom: 30px;

text-align: center;

margin-left: 50%;

background-color: #f8f8f8;

}

.dizhi {

padding-top: 60px;

padding-bottom: 72px;

background-color: #535353;

}

.text {

margin-left: 250px;

font-size: 12px;

color: #dddddd;

}

.sm {

margin-right: 250px;

}

.text p {

margin-bottom: 15px;

}

.sm .ewm {

display: inline-block;

margin-left: 20px;

width: 130px;

height: 170px;

border-radius: 4px;

background-color: rgb(255, 255, 255);

text-align: center;

float: right;

margin-top: -160px;

}

.sm .ewm img {

margin-top: 10px;

margin-bottom: 13px;

}

.sm .ewm p {

font-size: 12px;

color: #666666;

}

.ditu {

height: 61px;

padding-top: 24px;

background-color: rgb(49, 49, 49);

text-align: center;

}

.ditu p {

font-size: 12px;

color: #dddddd;

opacity: .5;

}

/* 尾部结束 */

</style>

</head>

<body>

</a>

</div>

</ul>

</div>

</a>

</div>

</div>

<ul>

</ul>

</div>

</div>

<ul>

<li><a href="#">JAVA工程师</a></li>

<li><a href="#">PHP工程师</a></li>

</ul>

</div>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

<li>

<p class="name">Java开发工程师</p>

</div>

<span>移动互联网</span>

</div>

</div>

</li>

</ul>

<ul>

</ul>

</div>

</div>

<p>地址:广东奥林匹克体育中心体育场13区4楼410室（9号电梯）</p>

<p>商务合作：jingkai@jingkaigz.com</p>

<p>人才招聘：hr@jingkaigz.com</p>

<p>地铁：广州地铁黄村E出口</p>

</div>

<p>java学习订阅号</p>

</div>

</div>

</body>

</html>

小忆（华仔）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门到熟悉day05

学成在线（网页）&lt;!DOCTYPE html&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;学成在线教育平台-不是每个网站都叫学成在线&lt;/title&gt;&lt;!-- css初始化文件 --&gt;&l
复制链接

扫一扫

专栏目录