【练习】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的动 ...
随机推荐
- Hdu 1698(线段树 区间修改 区间查询)
In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...
- 记录下Webapi签名机制
首先,写这篇文章的原因是因为最近某一个项目中的接口被人为调用了,导致了数据库数据被串改.虽然是内部人无意点的,但还是引起了我的担忧,所有整理了下关于Webapi的相关签名机制. 一.我们在开发接口时, ...
- 修改Jenkins用户的密码
说明:本方法仅适用于jdk6+.tomcat6+和Jenkins专有用户数据库的Jenkins! 很多童鞋在使用jenkins的时候忘记密码了,然后各种蛋疼.最近闲着无事,折腾了下.好了,闲话少扯. ...
- AngularJS学习篇（十）
AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...
- 让盒子两端对齐小技巧 => inline-block
今天在项目中碰到了设计盒子两端对齐的栗子,咱们用inline-block方法轻松的解决了,下面是我的经验: 原理: 利用文字text-align:justify; 操纵inline-block盒子,能 ...
- mapbox-gl象形文字字体glyph生成
简介 mapbox-gl可以对文字显示各种字体(依赖ttf文件),内部采用的是读取protobuf文件 环境条件 硬件:mac.网络 软件:nodejs.npm 创建mapbox-gl可用的字体pro ...
- linq中group by
本文导读:LINQ定义了大约40个查询操作符,如select.from.in.where.group 以及order by,借助于LINQ技术,我们可以使用一种类似SQL的语法来查询任何形式的数据.L ...
- 用C#操作IIS创建虚拟目录和网站
#region CreateWebsite 添加网站 public string CreateWebSite(string serverID, string serverComment, string ...
- 使用工厂方法模式实现多数据库WinForm手机号码查询器（附源码）
先讲一下简单工厂模式.工厂方法模式.抽象工厂模式的东西: 简单工厂模式(Simple Factory Pattern):工厂类中包含了必要的逻辑判断,根据客户端的选择条件动态实例化相关类,也就是说产品 ...
- C# 中英文符号互转
/// 转全角的函数(SBC case) /// ///任意字符串 /// 全角字符串 /// ///全角空格为12288,半角空格为32 ///其他字符半角(33 ...