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. xml配置文件命名空间学习

    xmlns(XML Namespaces的缩写)是一个属性,是XML(标准通用标记语言的子集)命名空间.作用是赋予命名空间一个唯一的名称. 编写Spring或者Maven或者其他需要用到XML文档的程 ...

  2. Codeforces Round #344 (Div. 2) 631 C. Report （单调栈）

    C. Report time limit per test2 seconds memory limit per test256 megabytes inputstandard input output ...

  3. Python中的序列

    Python中有四种内建的数据结构,即列表.元组.字典.集合.其中字典和集合我会以后再写,现在先说列表和元组,它们两个和以前提到很多次的字符串, 其实都属于——序列. 一.列表(list): 1. l ...

  4. 多线程-生产者消费者（BlockingQueue实现）

    三.采用BlockingQueue实现 BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具. BlockingQueue有四个具体的实现类,根据不同需 ...

  5. mvn高级构建

    指定pom文件,打包指定的module,并且自动打包这个模块所依赖的其他模块. mvn clean install -f vmc-business-parent/pom.xml -pl vmc-sch ...

  6. 用Python实现简单购物车

    作业二:简单购物车# 实现打印商品详细信息,用户输入商品名和购买个数,则将商品名,价格,购买个数加入购物列表,# 如果输入为空或其他非法输入则要求用户重新输入 shopping_list = [] w ...

  7. 《Python 3标准库》

    在本书中,你会看到用来处理文本.数据类型.算法.数学计算.文件系统.网络通信.Internet.XML.Email.加密.并发性.运行时和语言服务等各个方面的实用代码和解决方案.在内容安排上,每一节都 ...

  8. 【Druid】-Druid数据源加密数据库密码配置

    1.数据库配置文件添加配置 <property name="filter" value="config"> <property name=&q ...

  9. Linux任务计划及周期性任务执行：at、crontab命令

    一.概述 未来的某时间点执行一次某任务:at, batch 周期性运行某任务:crontab 这两个任务的执行结果:会通过邮件发送给用户 (本地终端用户之间的邮件通知) centos 5,6,7默认开 ...

  10. Spring Boot教程（二十九）使用JdbcTemplate操作数据库

    使用JdbcTemplate操作数据库 Spring的JdbcTemplate是自动配置的,你可以直接使用@Autowired来注入到你自己的bean中来使用. 举例:我们在创建User表,包含属性n ...