简易页面

最新推荐文章于 2022-07-29 16:49:09 发布
最新推荐文章于 2022-07-29 16:49:09 发布
阅读量163 收藏
点赞数
分类专栏： 自写小案例（粉丝）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46999664/article/details/109076133
版权

a{
text-decoration: none;
color: black;
}

.clearfix:after{
content: “”;
clear: both;
display: block;
}

/header/

.left{
float: left;
}

.right{
float: right;
}

.header header .title{
width: 96%;
height: 30px;
margin-left: 100px;
}

.header header .search{
display: inline-block;
}

.header .nav img{
float: left;
margin: -16px -55px 0 290px;
}

.header .nav .like{
float: right;
margin-right: 250px;
margin-top: -20px;
font-size: 14px;
}

.header nav .nav{
width: 100%;
height: 70px;
background: url("…/img/2020-7-25-9-37-59.png");
background-repeat: repeat-x;
background-size: contain;
padding: 40px 0;

}

.nav .nav-a{
color: #dfdade;
}
.nav .nav-a a{
color: #dfdade;
}

button.yellow{
background: #f7e2a3;
width: 100px;
height: 30px;
margin-left: 5px;
}

button.pink{
background: #f7d4ae;
width: 100px;
height: 30px;
}

.nav .nav-a a:last-child{
color: greenyellow;
}

.header .nav .button-form .button1,
.header .nav .button-form .button2{
float: left;
height: 30px;
background: #fbf7ec;
border: 1px solid #000000;
text-align: center;
line-height: 30px;
}

.header .nav .button-form .button1{
width: 120px;
}

.header .nav .button-form .button2{
width: 560px;
margin-left: 10px;
}

.header .nav .button-form .button1 span,
.header .nav .button-form .button2 span{
margin: 0 5px;
}

.header .footer-search{
width: 100%;
height: 40px;
line-height: 40px;
background: #f7ce42;
}

.header .footer-search .search{
margin-left: 250px;
}

.header .footer-search .search select,
.header .footer-search .search input,
.header .footer-search .search button{
margin-right: 10px;
}

.header .footer-search .search span{
margin: 0 5px;
}

.header .footer-search .search input[type=“text”]{
width: 300px;
}

.header .footer-search .search,.header .footer-search .search form{
display: inline-block;
}

.header .bar{
margin-top: 10px;
width: 100%;
}

/**/
article.left{
margin-top: 10px;
width: 20%;
height: 700px;
float: left;
text-align: center;
}

article.left h4{
width: 80%;
height: 25px;
line-height: 25px;
text-align: left;
margin: 0 auto;
color: green;
border-bottom: 1px solid #000000;
}

article.left h4.blue{
color: blue;
}

article.left h4.brown{
color: brown;
}

article.left .ul ul{
list-style: none;
}

article.left .ul li:nth-of-type(2n){
float: right;
}

article.left .ul ul li{
float: left;
}

article.left .ul ul{
margin: 0 auto;
width: 360px;
height: 42px;
line-height: 42px;
border-bottom: 1px dashed #DFDADE;

}

article.left .ul li{
width: 130px;
}

article.left ul span{
margin: 0 47px;
float: left;
}

aside.right{
margin-top: 10px;
width: 79%;
height: 700px;
float: right;
margin-bottom: 30px;
}

aside.right .top>.left{
width: 50%;
float: left;
}

aside.right .top .left .left{
margin-left: 120px;
float: left;
}

aside.right .top .left .left li{
width: 100%;
border-bottom: 1px dashed #DFDADE;
}

aside.right .top .left .left li span a{
color: orange;
margin-right: 4px;
}

aside.right .top .left .right{
float: right;
margin-right: 20px;
}

aside.right .top .left .right .img{
width: 100%;
height: 100px;
margin-top: 10px;
}

aside.right .top .left .right .span{
width: 100%;
height: 100px;
}

aside.right .top .left .right .img img{
float: left;
}

aside.right .top .left .right .img span{
float: right;
}

aside.right .top .left .right .span img{
float: left;
}

aside.right .top .left .right .span span{
float: right;
}

aside.right .top>.right{
width: 50%;
float: right;
}

aside.right .middle{
width: 100%;
height: 40px;
margin: 20px 0;
clear: both;
}

aside.right .middle img:nth-child(2){
margin: 0 71.5px;
}

aside.right .bottom{
width: 100%;
height: 350px;
}

aside.right .bottom .left{
width: 75%;
height: 350px;
}

aside.right .bottom .left .box1,
aside.right .bottom .left .box2,
aside.right .bottom .left .box3,
aside.right .bottom .left .box4,
aside.right .bottom .left .box5{
width: 225px;
float: left;
text-align: left;
}

aside.right .bottom .left img{
width: 150px;
margin: 0 36px;

}

aside.right .bottom .left .box2{

}

aside.right .bottom .left .box3{

}

aside.right .bottom .left .box4{

}

aside.right .bottom .left .box5{

}

aside.right .bottom .right{
width: 25%;
height: 350px;
background: #f7e2de;
}

aside.right .bottom .right img{
width: 40%;
margin: 5px 5px 5px 5px;
}

aside.right .bottom .right img:nth-of-type(2n+1){
margin-left: 34px;
}

/**/
.footer{
width: 100%;
height: 50px;
clear: both;
text-align: center;
}

.footer a{
color: brown;
}

您好，欢迎光临当当网 登录 注册
ico 购物车 | 我的当当 | 帮助 | 当当首页 
			</div>
			
			<nav>
				<div class="nav">
					<img src="img/DDlogoNEW.png"/>
					<a class="like" href="">加入收藏夹</a>
					<div class="button-form">
						<div class="button1">
							<a href="" style="color: green;">图像</a>
							<span>|</span>
							<select name="" style="background: none; color: blue;">
								<option value="">音像</option>
							</select>
						</div>
						<div class="button2">
							<a href="">数码家电</a>
							<span>|</span>
							<a href="">美&nbsp;&nbsp;&nbsp;&nbsp;妆</a>
							<span>|</span>
							<a href="">母&nbsp;&nbsp;&nbsp;&nbsp;婴</a>
							<span>|</span>
							<a href="">服装服饰</a>
							<span>|</span>
							<a href="">家&nbsp;&nbsp;&nbsp;&nbsp;居</a>
							<span>|</span>
							<a href="">活动健康</a>
							<span>|</span>
							<a href="">食&nbsp;&nbsp;&nbsp;&nbsp;品</a>
						</div>
							<button class="yellow">当当推荐</button>
							<button class="pink">当当
								<select name="" style="background: none;">
									<option value=""><img src="img/favicon.ico"/></option>
								</select>
							</button>
					</div><br />
					<div class="nav-a">
						
						<span>|</span>
						<a href="">新书</a>
						<span>|</span>
						<a href="">特价书</a>
						<span>|</span>
						<a href="">精彩评论</a>
						<span>|</span>
						<a href="">团购</a>
						<span>|</span>
						<a href="">在线读书</a>
						<span>|</span>
						<a href="">口碑导购</a>
					</div>
				</div>
			</nav>
			
			<div class="footer-search">
				<div class="search">
					<form action="" method="post">
						<select name="">
							<option value="">所有分类</option>
						</select>
						<input type="text" name="" id="" value="" />
						<input type="submit" value="搜索"/>
					</form>
					<span>|</span>
					<button>搜索风云榜</button>
					<a href="">默帐</a>
					<span>|</span>
					<a href="">澳苦饮</a>
					<span>|</span>
					<a href="">抽哼</a>
					<span>|</span>
					<a href="">四件套</a>
					<span>|</span>
					<a href="">多美值</a>
					<span>|</span>
					<a href="">更多>></a>
					<span>|</span>
				</div>
			</div>
			<img class="bar" src="img/2020-7-2-9-37-59.png"/>
		</header>
		
	</header>
	
	<article class="left">
		<div class="top">
			<h4>|  图书频道</h4>
			<ul class="ul">
				<ul><li><a href="">少&nbsp;&nbsp;&nbsp;&nbsp;儿</a></li>
				<span>|</span>
				<li><a href="">综&nbsp;&nbsp;&nbsp;&nbsp;艺</a></li></ul>
				<ul><li><a href="">外&nbsp;&nbsp;&nbsp;&nbsp;语</a></li>
				<span>|</span>
				<li><a href="">青&nbsp;&nbsp;&nbsp;&nbsp;春</a></li></ul>
				<ul><li><a href="">计算机</a></li>
				<span>|</span>
				<li><a href="">社&nbsp;&nbsp;&nbsp;&nbsp;科</a></li></ul>
				<ul><li><a href="">原版书</a></li>
				<span>|</span>
				<li><a href="">管&nbsp;&nbsp;&nbsp;&nbsp;理</a></li></ul>
				<ul><li><a href="">报&nbsp;&nbsp;&nbsp;&nbsp;刊</a></li>
				<span>|</span>
				<li><a href="">科&nbsp;&nbsp;&nbsp;&nbsp;技</a></li></ul>
				<ul><li><a href="">教&nbsp;&nbsp;&nbsp;&nbsp;育</a></li>
				<span>|</span>
				<li><a href="">生&nbsp;&nbsp;&nbsp;&nbsp;活</a></li></ul>
			</ul>
			<h4 class="blue">|  音像频道</h4>
			<ul class="ul">
				<ul><li><a href="">少&nbsp;&nbsp;&nbsp;&nbsp;儿</a></li>
				<span>|</span>
				<li><a href="">综&nbsp;&nbsp;&nbsp;&nbsp;艺</a></li></ul>
			</ul>
		</div>
		<div class="bottom">
			<h4 class="brown">|  图书频道</h4>
			<ul class="ul">
				<ul><li><a href="">数码家电</a></li></ul>
				<ul><li><a href="">美&nbsp;&nbsp;&nbsp;&nbsp;妆</a></li></ul>
				<ul><li><a href="">母&nbsp;&nbsp;&nbsp;&nbsp;婴</a></li></ul>
				<ul><li><a href="">运动健康</a></li></ul>
				<ul><li><a href="">服装服饰</a></li></ul>
				<ul><li><a href="">家&nbsp;&nbsp;&nbsp;&nbsp;居</a></li></ul>
				<ul><li><a href="">食&nbsp;&nbsp;&nbsp;&nbsp;品</a></li>
				<span>|</span>
				<li><a href="">更多>></a></li></ul>
			</ul>
		</div>
	</article>
	
	<aside class="right">
		<div class="top clearfix">
			<div class="left">
				<div class="left">
					<ul>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
						<li><span><a href="">[软件]</a></span><a href="">降温i方法您的积分降温i方法您的积分降温i方法您的积分</a></li>
					</ul>
				</div>
				<div class="right">
					<div class="img">
					<img src="img/2020-7-25-9-37-9.png"/>
					<span>炒鱿鱼面谈<br />管郡才15谭</span>
					</div>
					<div class="span">
					<img src="img/2020-7-25-9-37-9.png"/>
					<span>炒鱿鱼面谈<br />管郡才15谭</span>
					</div>
				</div>
			</div>
			<div class="right">
				<img src="img/2020-7-25-37-59.png" width="130px"/>
				<img src="img/2020-7-25-37-59.png" width="130px"/>
				<img src="img/2020-7-25-37-59.png" width="130px"/>
			</div>
		</div>
		<div class="middle">
			<img src="img/2020-7--9-37-59.png" width="450px" height="40px"/>
			<img src="img/2020-7--9-37-59.png" width="450px" height="40px"/>
			<img src="img/2020-7--9-37-59.png" width="450px" height="40px"/>
		</div>
		<div class="bottom">
			<div class="left">
				<div class="box1"><img src="img/2020-25-37-59.png" alt="" /><br/><span>20000(乘客)（厂<br/>家特惠！限...</span><br/><span>定价：￥48</span><br/><span>当当价：￥65</span></div>
				<div class="box2"><img src="img/2020-25-37-59.png" alt="" /><br/><span>20000(乘客)（厂<br/>家特惠！限...</span><br/><span>定价：￥48</span><br/><span>当当价：￥65</span></div>
				<div class="box3"><img src="img/2020-25-37-59.png" alt="" /><br/><span>20000(乘客)（厂<br/>家特惠！限...</span><br/><span>定价：￥48</span><br/><span>当当价：￥65</span></div>
				<div class="box4"><img src="img/2020-25-37-59.png" alt="" /><br/><span>20000(乘客)（厂<br/>家特惠！限...</span><br/><span>定价：￥48</span><br/><span>当当价：￥65</span></div>
				<div class="box5"><img src="img/2020-25-37-59.png" alt="" /><br/><span>20000(乘客)（厂<br/>家特惠！限...</span><br/><span>定价：￥48</span><br/><span>当当价：￥65</span></div>
			</div>
			<div class="right">
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
				<img src="img/2020-7-7-59.png"/>
			</div>
		</div>
		<footer>
			<img src="img/-7-25-9-37-59.png" width="100%" height="55px"/>
		</footer>
	</aside>
	
	<footer class="footer">
		<a href="">公司简介</a>
		<span>|</span>
		<a href="">调征英才</a>
		<span>|</span>
		<a href="">网站联盟</a>
		<span>|</span>
		<a href="">自资指南</a>
		<span>|</span>
		<a href="">交易条款</a>
		<br />
		<span>Cadjiwefjjfj jj 当当网 2004-2008 All Rights Resjijdd</span>
		<img src=""/>
		<span>京ICP证041199号 见附件附加费欸积极的方法 即将发射东风</span>
		
	</footer>
</body>
Teng-YJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
简易html页面
04-06
适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
做一个简单的页面——基础
m0_65762277的博客
11-16 360
1.html标签有成双成对的，也有自结束标签2.html中是不区分大小写，但一般用小写居多3.标签可以嵌套，但不可以交叉嵌套4.养成良好的注释习惯，简洁，明了注释也不可以嵌套5.html.css,js都是一种宽泛的语言，它的容错率比较高它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响，而且它改的不一定是你想要的。
一个简单完整的网页
热门推荐
淡淡的芦苇的博客
07-24 6万+
获得源码链接，点击这里 网页头部+banner和信息部分+新闻部分+底部 一 头部 效果： 先对css进行初始化 分析：头部有一张图片和一个input输入框还有一个按钮+下面的通栏 因为用到左浮，右浮的地方不同我们可以写一个通类 这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐 二、通栏（宽度为适应屏幕所以是10...
简洁的个人博客网站前台html页面模板
06-15
这是一个个人博客的网页前端模板，欢迎下载。
简易博客搭建（html与css学习）（静态网页）
m0_46432295的博客
03-04 560
成品图如下： 本页代码： <! doctype html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--视窗，宽度...
查看天气预报简易页面源码
05-30
【标题】"查看天气预报简易页面源码"指的是一个用于展示天气预报的简单网页的源代码。这样的源码通常由HTML、CSS和JavaScript等技术构建，用于教学、学习或者快速原型设计，帮助开发者理解如何利用Web技术实现动态...
JSP实用教程之简易页面编辑器的实现方法（附源码）
10-19
在JSP中实现一个简易页面编辑器，主要是为了在不涉及复杂交互和数据库操作的情况下，为用户提供修改页面内容的能力。这种编辑器通常适用于简单的文本编辑，例如修改字体、大小、加粗或斜体等基本样式。以下是一个...
简易登陆页面
05-31
本项目名为"简易登录页面"，它是一个简洁的设计，旨在为用户提供清晰、易用的登录体验。在这个项目中，主要涉及到的技术是HTML，这是一种标记语言，用于构建网页的结构和内容。 HTML（HyperText Markup Language）...
JSP 实用程序之简易页面编辑器-附件资源
03-05
JSP 实用程序之简易页面编辑器-附件资源
web前端简易制作之HTML
似水灬流年的博客
09-28 4万+
1.文章标题 这里可以看出在 &amp;amp;amp;amp;amp;lt;head 里的title 中 添加了 hello world 那么生成的html文件 名称就叫做hello world 2.文本标签 HTML:表示该文件为HTML文件 HEAD：包含文件的标题，使用的脚本，样式定义等 BODY:放置浏览器中显示信息的所有标志和属性，其中内容在浏览器中显示。 1.标题标签：h1-----h6 表...
简洁精美的企业单页门户网站（纯静态模板）
NbTone的博客
07-03 9516
源码下载
一个简单的html页面
ngwth_nail的博客
09-15 1万+
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
一个简单的小页面
weixin_34308389的博客
09-16 367
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{height:100%;width: 100%;margin: 0px;padding...
简单页面设计
qq_63835662的博客
07-29 137
inputtype="text"class="form-control"id="inputUserName1"placeholder="用户名">
html5 外边距属性,HTML5属性：margin属性的用法实例
weixin_39565332的博客
06-04 91
这篇文章给大家介绍的内容是关于HTML5属性：margin属性的用法实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Documentp{width: 100px;height: 100px;background-color: red;/* 外边距 */margin-top: 30px;margin-left: 100px;margin-right: 100px;margin-b...
简单的登陆界面
MBLHQ的博客
07-22 2975
每一次做一个东西，都希望不要做得太丑，但无奈css太差，也只能坐一个简单的样式。给大家分享一个简单的登陆界面，在分享之前先讲解一下几个css中的属性。大神可以略过，只是自己在做这个登陆界面时的学习的新知识点。   1.overflow:规定当内容溢出元素框时发生的事情。   2.outline： （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。（设置元素周围的轮廓线
分包合同计量单.docx
最新发布
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
用web页面做一个加减乘除的简易页面
05-24
好的，以下是一个简单的加减乘除计算器的web页面示例： ```html <!DOCTYPE html> 简易计算器 简易计算器 第一个数： <input type="number" id="num1" name="num1" required><br> 运算符: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Teng-YJ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值