HTML

表单标签属性介绍

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>表单标签属性介绍</title>

	</head>

	<body>

		<form action="#" method="get">

			隐藏标签：<input type="hidden" name="id" value="" /><br /> 用户名：

			<input type="text" name="username" vplaceholder="请输入用户名" required="required" /><br /> 密码：

			<input type="password" name="password" required="required" /><br /> 确认密码：

			<input type="password" name="repassword" required="required" /><br /> 性别：

			<input type="radio" name="sex" value="男" checked="" />男

			<input type="radio" name="sex" value="女" />女<br /> 爱好：

			<input type="checkbox" name="hobby" value="钓鱼" />钓鱼

			<input type="checkbox" name="hobby" value="打飞机" />打飞机

			<input type="checkbox" name="hobby" value="写代码" checked="checked" />写代码<br /> 头像：

			<input type="file" name="file" /><br /> 籍贯：

			<select name="province">

				<option>--请选择--</option>

				<option value="北京">北京</option>

				<option value="上海" selected="selected">上海</option>

				<option value="广州">广州</option>

			</select><br /> 自我介绍：

			<textarea name="self"></textarea><br /> 提交按钮：

			<input type="submit" value="注册" /><br /> 重置按钮：

			<input type="reset" /><br />

		</form>

	</body>

</html>

HTML

div演示效果

div是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。

span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用它主要用于对括起来的内容进行样式的修饰。

使用DIV+CSS完成首页重新布局.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>首页</title>

		<style>

			#father {

				border: 1px solid red;

				width: 1300px;

				height: 2100px;

				margin: auto;

			}

			#logo {

				border: 1px solid red;

				width: 1300px;

				height: 50px;

			}

			.top {

				border: 1px solid blue;

				width: 431px;

				height: 50px;

				float: left;

			}

			#top {

				padding-top: 12px;

				height: 50px;

			}

			#menu {

				border: 1px solid red;

				width: 1300px;

				height: 50px;

				background-color: orange;

			}

			ul li {

				display: inline;

				color: white;

			}

			#clear {

				clear: both;

			}

			#product {

				border: 1px solid red;

				width: 1300px;

				height: 1000px;

			}

			#product_top {

				border: 1px solid blue;

				width: 100%;

				height: 45px;

				padding-top: 8px;

			}

			#product_bottom {

				border: 1px solid green;

				width: 100%;

				height: 500px;

			}

			#product_bottom_left {

				border: 1px solid red;

				width: 200px;

				height: 500px;

				float: left;

			}

			#product_bottom_right {

				border: 1px solid blue;

				width: 1094px;

				height: 500px;

				float: left;

			}

			#big {

				border: 1px solid red;

				width: 544px;

				height: 248px;

				float: left;

			}

			.small {

				border: 1px solid blue;

				width: 180px;

				height: 248px;

				float: left;

				/*让里面的内容居中*/

				text-align: center;

			}

			#bottom {

				text-align: center;

			}

		</style>

	</head>

	<body>

		<div id="father">

			<!--1.logo部分-->

			<div id="logo">

				<div class="top">

					<img src="../../img/微信截图_20170716005056.png" height="46px" />

				</div>

				<div class="top">

					<img src="../../img/微信截图_20170716005056.png" height="46px" />

				</div>

				<div class="top" id="top">

					<a href="#">登录</a>

					<a href="#">注册</a>

					<a href="#">购物车</a>

				</div>

			</div>

			<div id="clear">

			</div>

			<!--2.导航栏部分-->

			<div id="menu">

				<ul>

					<a href="#">

						<li style="font-size: 20px;">全部产品及服务 </li>

					</a>    

					<a href="#">

						<li>首页</li>

					</a>    

					<a href="#">

						<li>手机</li>

					</a>    

					<a href="#">

						<li>宽带光纤</li>

					</a>    

					<a href="#">

						<li>老用户</li>

					</a>    

					<a href="#">

						<li>省钱</li>

					</a>    

					<a href="#">

						<li>自助服务</li>

					</a>    

				</ul>

			</div>

			<!--3.轮播图-->

			<div id="">

				<img src="../../img/微信截图_20170716005056.png" width="100%" />

			</div>

			<!--4.最新商品-->

			<div id="product">

				<div id="product_top">

					    

					<span style="font-size: 25px;padding-top: 8px;">最新商品</span>   

					<img src="../../img/微信截图_20170716005056.png" />

				</div>

				<div id="product_bottom">

					<div id="product_bottom_left">

						<img src="../../img/微信截图_20170716005056.png" width="100%" height="100%" />

					</div>

					<div id="product_bottom_right">

						<div id="big">

							<a href="#"><img src="../../img/微信截图_20170716005056.png" width="100%" height="100%"></a>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

						<div class="small">

							<img src="../../img/微信截图_20170716005056.png">

							<a href="#">

								<p style="color: gray;">4G纯流量云卡</p>

							</a>

							<p style="color: red;">免费送2G流量</p>

							<p style="color: red;">￥20</p>

						</div>

					</div>

				</div>

			</div>

			<!--5.广告图片-->

			<div id="">

				<img src="../../img/微信截图_20170716005056.png" width="100%" />

			</div>

			<!--6.友情链接和版权信息-->

			<div id="bottom">

				<a href="#">关于我们</a>

				<a href="#">电信公告</a>

				<a href="#">网站导航</a>

				<a href="#">掌上营业厅</a>

			</div>

		</div>

	</body>

</html>

Web02_HTML&CSS的更多相关文章

  1. 【javaweb学习笔记】WEB02_HTML&CSS

    一.表单相关知识 1.表单: 所有需要提交到服务器端的表单项必须使用<form></form>括起来 form标签属性(有两个): 1)action,整个表单提交的位置(可以是 ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  4. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  7. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  8. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  9. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. python中的else语句

    python语言和其它语言一样在支持else语句,通常else语句和if语句合用,完成程序的分支选择功能. 例如如下打印学成成绩代码: score = int(input("请输入成绩:&q ...

  2. 三天读完调整自己每天的精力——读书笔记（Unfinished）

    近段时间精力低下,读了一本Jim Loehr的The Power full engagement 精力管理的书,我们有时候往往不是时间规划不够,而是没有规划好自己的精力. 橙色字体是自己对于这本书的现 ...

  3. 《编译原理》-用例题理解-自底向上的语法分析，FIRSTVT，LASTVT集

    <编译原理>-用例题理解-自底向上的语法分析,FIRSTVT,LASTVT集 上一篇:编译原理-用例题理解-自顶向下语法分析及 FIRST,FOLLOW,SELECT集,LL(1)文法 本 ...

  4. 基于Twemproxy的Redis集群方案(转载)

    原文地址:基于Twemproxy的Redis集群方案 概述 由于单台redis服务器的内存管理能力有限,使用过大内存redis服务器的性能急剧下降,且服务器发生故障将直接影响大面积业务.为了获取更好的 ...

  5. Istio 1.4 部署指南

    原文链接:Istio 1.4 部署指南 Istio 一直处于快速迭代更新的过程中,它的部署方法也在不断更新,之前我在 1.0 版本中介绍的安装方法,对于最新的 1.4 版本已经不适用了.以后主流的部署 ...

  6. 动软生成器 model生成模板

    <#@ template language="c#" HostSpecific="True" #> <#@ output extension= ...

  7. vue项目搭建步骤以及一些安装依赖包

    一． vue-cli初始化1. 全局安装 vue-clinpm install --global vue-cli2. 创建一个基于 webpack 模板的新项目vue init webpack my- ...

  8. linux运维、架构之路-Kubernetes基础（一）

    一.Kubernetes介绍 Kubernetes最初源于谷歌内部的Borg,提供了面向应用的容器集群部署和管理系统.Kubernetes的目标旨在消除编排物理/虚拟计算,网络和存储基础设施的负担,并 ...

  9. Codeforces 932 E Team Work ( 第二类斯特林数、下降阶乘幂、组合数学 )

    题目链接 题意 : 其实就是要求 分析 : 先暴力将次方通过第二类斯特林数转化成下降幂 ( 套路?) 然后再一步步化简.使得最外层和 N 有关的 ∑ 划掉 这里有个技巧就是 将组合数的表达式放到一边. ...

  10. 洛谷 P2820 局域网x

    题目背景 某个局域网内有n(n<=100)台计算机,由于搭建局域网时工作人员的疏忽,现在局域网内的连接形成了回路,我们知道如果局域网形成回路那么数据将不停的在回路内传输,造成网络卡的现象.因为连 ...