【练习】HTML+CSS
作业要求1
京东首页轮播图，效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JD轮播图</title> <style>
.img_border {
width: 790px;
height: 340px;
border: 1px solid blue;
margin: 0 auto;
position: relative;
} ul.img{
list-style: none;
padding: 0;
} ul li{
position: absolute;
left: 0;
top:0;
} .img_cont {
display: none;
} .right_button,.left_button{
width: 30px;
height: 100px;
/*background-color: #f4bf42;*/
font-size: 40px;
text-align: center;
line-height: 100px;
color:white; } .right_button {
position: absolute;
right: 0;
top:120px;
text-decoration: none;
} .left_button {
position: absolute;
left:0;
top:120px;
text-decoration: none;
}
.tag{
position: absolute;
width: 120px;
height: 15px;
background-color: rgba(0,0,0,0.3);
border-color: black;
border-radius: 60px;
bottom: 20px;
left: 320px;
display: inline-block; } .circle{
list-style: disc;
font-size: 25px;
position: absolute;
bottom: 0px;
left: 40px;
color: red;
} .circle1{
list-style: disc;
font-size: 25px;
position: absolute;
bottom: 0px;
left: 60px;
color: white;
} .circle2{
list-style: disc;
font-size: 25px;
position: absolute;
bottom: 0px;
left: 80px;
color: white;
} .circle3{
list-style: disc;
font-size: 25px;
position: absolute;
bottom: 0px;
left: 100px;
color: white;
} .circle4{
list-style: disc;
font-size: 25px;
position: absolute;
bottom: 0px;
left: 120px;
color: white;
}
</style>
</head>
<body>
<div class="img_border">
<ul class="img">
<li >
<img src="jd.jpg" alt="">
</li>
<li class="img_cont">
<img src="jd1.jpg" alt="">
</li>
<li class="img_cont">
<img src="jd3.jpg" alt="">
</li>
<li class="img_cont">
<img src="jd4.jpg" alt="">
</li>
<li class="img_cont">
<img src="jd6.jpg" alt="">
</li>
</ul>
<div class="button">
<a href="" class="right_button">
>
</a> <a href="" class="left_button">
<
</a>
</div> <div class="tag">
<ul class="circle">
<li></li>
</ul>
<ul class="circle1">
<li></li>
</ul>
<ul class="circle2">
<li></li>
</ul>
<ul class="circle3">
<li></li>
</ul>
<ul class="circle4">
<li></li>
</ul>
</div>
</div> </body>
</html>
jd轮播图
作业要求2
电商网站注册界面，效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
* {
margin: 0;
} .index_header {
background-color: #F5F5F5;
width: 100%;
height: 50px;
} .header_content {
width: 70%;
height: 50px;
margin: 0 auto;
line-height: 50px;
} .header_content a{
text-decoration: none;
color: black;
} .header_content a:hover {
text-decoration: underline;
color: red;
} .collect {
margin-right: 600px;
} .action a{
margin-left: 15px ;
} .index_content {
width: 70%;
margin:0 auto;
}
.box {
border: 2px solid #F5F5F5;
overflow: hidden;
} .register {
width: 60%;
margin-left: 100px;
margin-top: 40px; } .register p{
margin-top: 30px;
} .submit_position {
margin-left: 60px;
} .submit {
width: 220px;
height: 30px;
background-color: #C71585;
text-align: center;
margin-bottom: 50px;
} .submit a{
text-decoration: none;
color: white;
height: 30px;
font-size: 10px;
} .register,.advertising{
float: left;
} .advertising{
width: 20%;
margin-top: 40px;
margin-right: 60px;
} .ad_text {
margin-bottom: 20px;
}
.ad_text a{
text-decoration: none;
} .ad_text a:hover{
text-decoration: underline;
color: red;
} .text_bottom {
width: 100%;
text-align: center;
} </style>
</head>
<body>
<div class="index_header">
<div class="header_content">
<span class="collect">
<a href="">*收藏本站</a>
</span > <span class="action">
<a href="">登录</a>
<a href="">免费注册</a>
<a href="">我的订单</a>
<a href="">VIP会员俱乐部</a>
<a href="">客户服务</a>
</span>
</div>
</div> <div class="index_content">
<div class="content_img">
<img src="1.jpg" alt="" width="280" height="180">
</div>
<div class="box">
<div class="register">
<h2>注册新用户</h2>
<form action="">
<p>
<span style="color: red;">*</span>
用户名
<input type="text">
</p>
<p>
<span style="color: red;">*</span>
手机号
<input type="text">
</p>
<p>
<span style="color: red;">*</span>
登录密码
<input type="text">
</p>
<p>
<span style="color: red;">*</span>
确认密码
<input type="text">
</p>
<p>
<span style="color: red;">*</span>
验证码
<input type="text">
</p> <div class="submit_position">
<p style="font-size: 6px">
我已阅读并同意
<span style="color: blue;">《用户注册协议》</span>
</p> <p class="submit">
<a href="">同意以上协议并注册</a>
</p>
</div>
</form>
</div> <div class="advertising">
<p class="ad_text">
我已注册，现在就<a href="">登录</a>
</p>
<img style="margin-top: 10px" src="2.jpg" alt="" width="300" height="200">
</div> </div> <div class="text_bottom">
©2017 www.hirsi.com 小火星 版权所有
</div> </div> </body>
</html>
电商界面
作业要求3
抽屉主页头部界面，效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽屉</title>
<link rel="icon" href="chouti.jpg">
<style>
*{
margin: 0;
} .box{
width:100%;
height: 50px;
background-color: dodgerblue;
} .box_content{
width:70%;
height: 50px;
margin: 0 auto;
line-height: 50px; } .a1 a{
margin-right: 2px;
} .a2 a{
text-decoration: none;
color: gold;
font-size: 30px;
vertical-align: text-bottom;
} .action a{
text-decoration: none;
color:white;
font-size: 15px;
vertical-align: text-bottom;
/*margin-left: 1px;*/
padding:15px;
} .action a:hover{
background-color: rgba(0,0,0,0.3);
} .action a:visited{
background-color: blue;
} .register a{
text-decoration: none;
color: white;
font-size: 15px;
vertical-align: text-bottom;
margin-left: 200px; } .enter a{
text-decoration: none;
color: white;
font-size: 15px;
vertical-align: text-bottom;
margin-left: 40px;
} .form {
vertical-align: text-bottom;
margin-left:10px;
position: relative;
} .icon{
width: 11px;
height: 12px;
position: absolute;
right: 1px;
top:7px;
display: inline-block;
background-image: url(fadajing.png);
background-repeat: no-repeat;
background-position: 0 -197px;
} </style>
</head>
<body>
<div class="box">
<div class="box_content">
<span class="a1">
<a href="">
<img style="margin-top: 5px" src="chouti.jpg" alt="" width="40px" height="40px" >
</a>
</span> <span class="a2">
<a href="">
抽屉新热榜
</a>
</span> <span class="action">
<a href="">全部</a>
<a href="">42区</a>
<a href="">段子</a>
<a href="">图片</a>
<a href="">挨踢1024</a>
<a href="">你问我答</a>
</span> <span class="register">
<a href="">注册</a>
</span> <span class="enter">
<a href="">登录</a>
</span> <span class="form">
<input type="text" name="sousuo">
<a href="" class="icon"></a>
</span> </form>
</div> </div> </body>
</html>
抽屉
【练习】HTML+CSS的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- java语言在某个数组中查找某个字符出现的次数
package com.llh.demo; import java.util.Scanner; /** * * @author llh * */ public class Test { /* * 在某 ...
- Linux学习（十二）mkpasswd、su、sudo、限制root远程登录
一.mkpasswd mkpasswd用来生成随机密码字符串.可以指定长度和特殊字符的长度: [root@ruanwenwu01 ~]# mkpasswd O7.alw5Wq [root@ruanwe ...
- Tickets
Tickets Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Stat ...
- 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest J. Bottles
J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...
- Django 模板中 include 标签使用小结
include 标签允许在模板中包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 { ...
- Windows解决anaconda下双python版本安装TensorFlow
首先,就是双版本anaconda的安装: 以前安装好的是python2.7版本,而TensorFlow的安装仅支持3.5版本的.但是自己本来的2.7版本又不想遗弃.所以安装双版本的: 在anacond ...
- HTML中动态生成内容的事件绑定问题【转载】
转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...
- Git Submodules are not SVN Externals
一直在寻找Git跟TFS里面类似SVN Externals的替代方案, 今天终于找到了GIT里面的替代方案,在此做个备注 http://alexking.org/blog/2012/03/05/git ...
- python的xlwt模块的常用方法
工作中需要导出数据为excel格式,使用了xlwt模块,在此记录一下用到的内容. 1. 创建一个表,设置一个sheet import xlwt workbook = xlwt.Workbook(enc ...
- java操作solr实现查询功能
一.封装的查询方法 /** * solr查询方法 * @param client solr客户端 * @param query solr查询对象 * @return list集合 * @throws ...