HTML+CSS 轮播图 电商网站注册界面 抽屉主页头部界面
【练习】HTML+CSS
作业要求1
京东首页轮播图，效果如下
jd轮播图
<!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>
抽屉
转载于:https://www.cnblogs.com/xyhh/p/10860302.html
HTML+CSS 轮播图 电商网站注册界面 抽屉主页头部界面相关推荐
- css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
- 开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件 1.轮播图样式 上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用 文件的目录路径为: 需要轮播图插件的 ...
- css如何设置轮播速度,css轮播图如何实现？
在往期文章小编介绍过 JS 如何实现轮播图.那么这篇文章我们来介绍另一种方法:CSS 轮播图如何实现. 实现效果 实现思路 用 CSS 实现图片轮播主要是用到 CSS3 animation 属性和 ...
- html+css轮播图
昨天收到腾讯云客服电话,告知我网站域名备案后无法正常访问,管局会在25号强制解除备案! 我也是醉了,这坑货客服收到告知后部立刻联系,等到或到期了,联系我,无奈只能随便先写个东西放上去应付一下了! 这样 ...
- CSS轮播图中小圆点的定位问题
新手上道,磕碰不少,遇到一个轮播图切换点(类似淘宝中的banner轮播下的小圆点)的位置问题,今天做个记录. 就是下面这张图中蓝色圈中的部分的效果. 我用的是定位流,"子绝父相", ...
- html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧 示意图1.png 示意图2.png 示意图3.png 实现思路 使用 d ...
- 如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)
如何用html写一个电商网页主页 前言 目前我还在学习这个初阶段,如果有错误的地方或者没有做好的地方,还请诸位大佬指正,我会虚心学习,多谢了 正文 里面的东西 后面我会详细讲解内容 ps 这里是htm ...
- css轮播图底部小点点位置问题
不明白我的小 li 为啥不顶格出现,嘻嘻 不过更会发这个博客了-OvO- .circle {position: absolute;left: 50%;margin-left: -35px;bottom ...
- 网站上的轮播图都是怎么实现的？
什么是轮播图 在许多网站首页都有一个自动切换的图片栏,比如下面这个从淘宝上截取的轮播图. 技术栈 要实现轮播图功能,主要是要用到JavaScript中BOM对象模型. 什么是BOM BOM(Brows ...
最新文章
- [导入]日志 20071211（WCF，实验室产品）
- IDEA 解决Tomcat控制台输出乱码问题
- BIOS INT 10-13功能调用的“另类”玩法
- matlab 分号;_MATLAB使用教程（二）—新手来看
- 基于STM32的电池管理系统触摸屏设计方案
- 各大linux发行版安装宝塔桌面脚本
- oracle系统物料事务处理类型,Oracle_EBS_斌力十足系列_INV库存模块操作手册_杂项事务处理的分类和实际业务的应用场景专题研究报告...
- 史上最详细的Hadoop环境搭建
- vb6 连接 mqtt 服务器
- kafka生产者发送消息提升效率策略设置
- Property 'typeAliasesPackage' threw exception; nested exception is java.lang.ExceptionInInitializer
- 西游记中孙悟空大闹天宫时期被孙悟空打败的
- 华为智慧屏和荣耀智慧屏究竟有什么区别？
- 利用R语言如何判别和分类
- 普通壳的脱壳方法和脱壳技巧
- 百度云服务器远程密码忘记,2020-11-17 新买了百度云服务器，如何用ssh远程登陆...
- 网页CAD 网页浏览和编辑DWG
- IP-guard功能详解——安全U盘
- matlab加速度转化为位移,matlab数值积分实现加速度、速度、位移的转换（时域频域积分）...
- java20K之路(番外篇)：程序员的技术KPI指标是什么呢