实践任务：第五章 CSS3布局

最新推荐文章于 2023-07-02 23:23:58 发布
最新推荐文章于 2023-07-02 23:23:58 发布
阅读量885 收藏 12
点赞数 5
文章标签： 前端 css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_71408630/article/details/130310211
版权

目录

任务一：使用表格填充和边框

任务二：使用浮动实现水平菜单

任务三：使用方框属性实现图片按钮

任务四：使用外部样式的综合应用

任务五：使用DIV+CSS3实现页面的整体布局

扩展训练_使用方框属性实现立体方框

扩展训练_表单的CSS设

任务一：使用表格填充和边框

  • 效果图展示：

  • 代码展示 
<! DOCTYPE HTML>
<HTML>
<HEAD lang="en">
<META charset="UTF-8" / >
<TITLE>表格虚线框的样式</TITLE>
<STYLE type="text/css">
.tableBorder 
{  
	border-right-width: 3px;
	border-right-color:red;
	border-right-style:dashed;
	padding-top:20px;
	padding-left:10px;	
}
TR{
background:yellow;
}
</STYLE>
</HEAD>

<BODY>
<TABLE border="0">
  <TR>
    <TD class="tableBorder">手机</TD>
    <TD class="tableBorder">彩票</TD>
  </TR>
  <TR>
    <TD class="tableBorder">电脑</TD>
    <TD class="tableBorder">相机</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

任务二：使用浮动实现水平菜单

  • 效果图展示：

  • 代码展示： 
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>利用浮动实现水平菜单</title>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。添加颜色和边框，以使其更漂亮。
</p>

</body>
</html>

任务三：使用方框属性实现图片按钮

  • 效果图展示：

  • 代码展示： 
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>注册页</title>
<style type="text/css">
.picbutton{
   background-image: url(images/back.jpg);
   margin: 0px;
   border:0px;
   padding: 0px;
   height: 23px;
   width: 82px; 
   font-size: 14px;	   }
</style>
</head>
<body >
<form name="userfrm" method="post" action="submit.html" >
<p>用户名：  <input name="fname" type="text" size="20"> </p>
<p>密&nbsp; 码：  <input name="pass" type="password" size="21"> </p>
<p>
  <input name="reset" type="reset" value=" 重   填 "  class="picbutton" >
  &nbsp;&nbsp;
  <input name="bt1" type="submit"value=" 提   交 "  class="picbutton"  >
</p>
</form>
</body>
</html>

任务四：使用外部样式的综合应用

  • 效果图展示：

  •  代码展示：

CSS部分：

TABLE {text-align:center; font-family:"隶书"}
TH { 
	font-size:24px; 
	color:#FF0000; 
	text-align:center;
	background-color:#B9DCFF
	}
.text { 
		border-width:1px;
		border-style:solid;  
	   }
.picButton{ background-image:url(images/btn.gif);
   border:0 px;
   margin: 0px;
   padding: 0px;
   height: 26px;
   width: 99px; 
   font-size: 14px;	  
}
.td { 
	background-color:#FFC1FF;
	font-size:14px;
	border:1px solid gray;
	text-align:center
	}
A { font-size:14px;
	color:#0000FF;
	text-decoration:none 
	}
A:hover { text-decoration:underline; color:#FF0000}
.font {
		font-size:18px;
		color:#FF86C2; 
		font-style:italic; 
		background-color:#F5D378
	  }

HTML部分：

<! DOCTYPE HTML>
<HTML>
<HEAD lang="en">
<META charset="UTF-8" / >
<TITLE>外部样式表练习</TITLE>
<LINK rel="stylesheet" type="text/css" href="css.css">
</HEAD>

<BODY>
<TABLE width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <TR>
  <TH colspan="2"> 小众用户注册 </H3></TH>
  </TR>
  <TR  class="font">
    <TD>真实姓名：</TD>
    <TD><INPUT  type="text" name="txtname"  size="20" maxlength="20" class="text"></TD>
  </TR>
  <TR class="td">
    <TD>用户性别：</TD>
    <TD><INPUT type="radio" name="sex" value="M">&nbsp;男&nbsp;<INPUT type="radio" name="sex" value="F">女</TD>
  </TR>
  <TR  class="font">
    <TD>密码：</TD>
    <TD><INPUT  type="password" name="txtpwd" size="20" class="text"></TD>
  </TR>
  <TR>
  	<TD class="td">密码保护问题：</TD>
	<TD class="td"><SELECT name="question">
      <OPTION value="">选择一个问题</OPTION>
      <OPTION value="school">你的学校名称</OPTION>
      <OPTION value="dog">你的宠物的名字</OPTION>
    </SELECT></TD>
  </TR>
  <TR>
    <TD>请选择关注的商品类别：</TD>
    <TD><INPUT type="checkbox"  name="shopping" value="digit"/> 数码产品
		<INPUT type="checkbox"  name="shopping" value="sport"/> 运动系列
		<INPUT type="checkbox"  name="shopping" value="room"/> 家居用品
		<INPUT type="checkbox"  name="shopping" value="mus"/> 音像制品	</TD>
  </TR>
    <TR>
  <TD colspan="2"  class="font">
  <INPUT type="submit" name="submit" value="" class="picButton"><BR>
 <A href="#">点击提交，即表示同意接受下面《小众协议》</A></TD>
  </TR>
  <TR class="td">
  	<TD>小众协议</TD>
    <TD>
	  <TEXTAREA name="fwtk" cols="50" rows="5">公司依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意本协议，才能够享受本网站提供的服务。您在拍拍网登录即表示您完全接受本协议的全部条款。
重要须知： 在此特别提醒用户认真阅读本《小众网用户服务协议》--- 用户应认真阅读本《小众网用户服务协议》 (下称《协议》)中各条款。请您审阅并接受或不接受本《协议》（未成年人应在法定监护人陪同下审阅）。除非您接受本《协议》条款，否则您无权使用本网站提供的相关服务。您的使用行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。</TEXTAREA>	</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

任务五：使用DIV+CSS3实现页面的整体布局

  • 效果图展示：

  • 代码展示： 
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
 <title>小众商城</title>
 <style>
   body{margin:0px;padding:0px;}
   div{font:bold 36px 黑体;color:#fff;}
   #container{width:980px;margin:0px auto;}
   #header {width:100%;height:136px;}
   #main{width:100%;height:400px;} 
     .login,.login_right{width:50%;height:100%;}
   #footer{width:100%;height:100px;}
   #header,#footer{color:#000;}
   #header     {background:#ccc;}	 
   .login      {background:#3cc;}
   .login_right{background:#33FF33;}
   #footer     {background:#ccc;}	  
   .login,.login_right{float:left;}	  
 </style>
</head>
<body>
<div id="container">
  <div id="header">顶部(header)</div>
  <div id="main">
    <div class="login">登录(login)</div>
    <div class="login_right">登录说明(login_right)</div>
  </div>
  <div id="footer">底部(footer)</div>
</div> <!--container end-->	
</body>
</html>

扩展训练_使用方框属性实现立体方框

  • 效果图展示：

  • 代码展示： 
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<style type="text/css">
table{
	border-top:#CCCCCC solid 7px;
	border-left:#CCCCCC solid 7px;
	border-bottom:#999999 solid 7px;
	border-right:#999999 solid 7px;	
	bgcolor:#FFFFFF;
}

td{
	border-top:#cccccc solid 10px;
	border-left:#cccccc solid 10px;
	border-right:#F3F3F3 solid 10px;
	border-bottom: #F3F3F3 solid 10px;
}
</style>
<title>立体方框</title>
</head>
<body>
<table width="200" height="125" cellpadding="10" cellspacing="3" >
  <tr>
    <td><img src="images/face.png" width="128" height="128" border="0" /></td>
  </tr>
</table>
</body>
</html>

扩展训练_表单的CSS设计

  • 效果图展示：

  •  代码展示：
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>表单界面</title>
<style type="text/css">
*{margin:0px;
  padding:0px;}
body,textarea{font-size:12px;}
#all{width:400px;
     height:400px;
	 margin:0px auto;
	 line-height:1.8em;	 
     background-color:#eee;
	 border:1px solid #40984c;}
#top{background:#e9F6e5;
     border-bottom:1px solid #40984c;
	 text-align:center;
     color:#40984c;
	 font-size:14px;
	 font-weight:bold;}
.left{text-align:right;
      width:25%;}
.tb{width:100%;}
fieldset{border:1px solid #a3bfa8;
         width:90%;
		 margin-left:20px;}
.txt,textarea{border:1px solid #a3bfa8;
     background:#e9F6e5;}
.green{background:#e9F6e5;}
#bottom{text-align:center;}
.btn{width:80px;
     background:url("img/btn.gif") repeat-x;
     margin:5px;
	 border:1px solid #40984c;}
</style>
</head>
<body>
<div id="all">
  <div id="top">注册表单界面</div>
  <form method="post" action="asp.asp">
	    <fieldset>
		  <legend>注册基本信息</legend>
		  <table border="0" cellspacing="5" cellpadding="5" class="tb">
  <tr>
    <td class="left">用户名</td>
    <td><input type="text" class="txt" size="15" /></td>
  </tr>
  <tr>
    <td class="left">密&nbsp;&nbsp;码</td>
    <td><input type="password" class="txt" size="15" /></td>
  </tr>
</table>
		</fieldset>
		 <fieldset>
		  <legend>个人详细资料</legend>
		  <table border="0" cellspacing="5" cellpadding="5"  class="tb">
  <tr>
    <td class="left">出生日期</td>
    <td><input type="text" size="4" class="txt" />年<input type="text" size="2" class="txt" />月<input type="text" size="2" class="txt" />日</td>
  </tr>
  <tr>
    <td class="left">性别</td>
    <td><label><input type="radio" checked="checked" name="sex" />男</label><label><input type="radio" name="sex" />女</label></td>
  </tr>
  <tr>
    <td class="left">最高学历</td>
    <td>
	  <select>
	    <option value="研究生" selected="selected" class="green">研究生</option>
		<option value="大学">大学</option>
		<option value="高中/职高" class="green">高中/职高</option>
		<option value="初中及以下">初中及以下</option>
	  </select>
	</td>
  </tr>
  <tr>
    <td class="left">业余爱好</td>
    <td>
	  <select>
	    <option value="听音乐" selected="selected" class="green">听音乐</option>
		<option value="玩游戏">玩游戏</option>
		<option value="上网" class="green">上网</option>
		<option value="体育运动">体育运动</option>
	  </select>
	</td>
  </tr>
  <tr>
    <td colspan="2">服务条款</td>
  </tr>
  <tr>
    <td  colspan="2">
	  <textarea cols="55" rows="5" readonly="readonly">尊敬的用户，欢迎您注册并使用服务。在注册及使用前请您仔细阅读如下服务条款：本服务条款系由用户与本公司就服务所订立的相关权利义务规范。因此，请于注册成为用户前，确实详细阅读本服务条款的所有内容，当您点选同意键或定制、使用、接受服务时即视为您已仔细阅读本条款，同意接受本服务条款的所有规范并愿受其拘束，本服务条款对您及本公司均具有法律效力。
</textarea>
	</td>
  </tr>
</table>
		</fieldset>
		<div id="bottom"><input type="submit" value="注册" class="btn" /><input type="reset" value="重设" class="btn" /></div>
</form>	  
</div>
</body>
</html>

被头皮屑逼疯的秃头少女
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS 布局实践
独宠子沫的博客
05-12 1291
前端开发就像盖房子，如果说 HTML 是构成房子的砖瓦， CSS 则是决定这些砖瓦的位置和对它们进行装饰。在实际开发中，前端工程师在拿到设计稿后，都会先梳理页面的大致结构，构思完页面的布局后，再进行 coding。大多数网站都有着相似的布局，掌握这些“套路”便可以快速高效的完成开发工作。 相关属性 我们首先来了解布局相关的 CSS 属性。 display display 是 CSS 布局中很重要的...
CSS学习笔记--Div+Css布局实战(入门)
weixin_34218579的博客
08-04 124
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部，先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style type="text/css" > ...
CSS布局实战
qq_43645678的博客
08-06 329
CSS布局实战
CSS固定布局实战
shaonian1996
02-15 1251
CSS固定布局实战详解目标:CSDN主页画面预览：1:2:网页解读：1：总体5个部分：头部，主体（左中右），尾部。2：主体的中部和右面又分为几小块。布局：1 头部：导航栏加搜索框。html:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3实战&lt;/ti..
Aulas02:HTML5 和 CSS3
08-03
HTML5（超文本标记语言第五版）是网页内容的主要结构标准，它引入了许多新特性，提升了网页的可访问性、兼容性和性能。以下是一些HTML5的重要知识点： 1. **语义化标签**：HTML5引入了如、、、和等语义化标签，使...
htcspr:HTML5 + CSS3
03-08
而CSS3则是层叠样式表的第三次重大修订版，为网页设计提供了更多高级功能和更精细的控制。 **HTML5的新特性：** 1. **语义化元素**：HTML5引入了如, , , , 等语义化的标签，使得页面结构更加清晰，有利于搜索引擎...
HTML5+CSS3网页设计-第八章 定位网页元素.pptx
12-21
【HTML5+CSS3网页设计】中的定位技术是网页布局中的关键部分，它允许开发者精确控制网页元素在页面上的位置。本章主要介绍了四种CSS中的定位方式：static、relative、absolute和fixed，以及如何利用z-index调整元素...
HTML5&CSS3网页制作：HTML5段落标记.pptx
05-31
HTML5和CSS3是现代网页制作的两大核心技术，它们共同为网页内容的呈现提供了丰富的功能和样式。在HTML5中，段落标记`<p>`是网页文本布局的基础元素之一，用于组织和格式化文本内容。 段落标记`<p>`： 在HTML中，`...
HTML5+CSS3网页设计与制作教案PPT
03-09
HTML5（HyperText Markup Language第五版）是网页内容结构的标准语言，它对原有的HTML4进行了大量的改进和扩展。HTML5引入了新的标签，如、、、和，这些标签增强了语义化，使得页面结构更加清晰，有利于搜索引擎优化...
（全彩版）DIV+CSS实战布局
12-20
全彩版，DIV+CSS，一步一步带你从如何布局到代码如何书写，老少皆宜
DIV+CSS布局-实战篇思路梳理
qq_45383769的博客
04-23 1199
DIV+CSS布局-实战篇思路梳理 某官网首页布局实战（节选） 前端新人的误区 误区1：前端开发需要有设计细胞，要不然写的页面很难看。 回答：前端开发是俺图施工的，会有专门的ui设计师帮忙设计。 获取设计稿件的三种方式： 方式1：去千库网等ui设计素材平台购买（下载）设计稿，然后使用pxcook、慕客或者蓝湖进行标注信息。 优点：略微复杂，需要了解ui的相关知识 建议：如果没有ui设计师搭伙，不太适合新人。 方式2：随便找一个官网，使用qq浏览器，将网页转成图片并下载，然后使用pxcook进行标注 优点：
《web开发： CSS 浮动》
yexiangCSDN的专栏
01-21 513
一、CSS 浮动 1. 浮动（float) 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 2. 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 ...
回炉重造，css常规布局系统整理——实战开发后复盘小结
weixin_43207103的博客
07-19 353
回炉重造，css常规布局系统整理——实战开发后复盘小结 写在前面： ​ 在了解css布局之前，我们先了解两个小概念，我认为这将对你有所帮助！ ​ 块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； ​ 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； ​ 行内块：display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性； 1 基础css布局 1.1 position定位 ​ pos
新手学DIV+CSS商业网站布局从入门到精通(实战案例版) 朱印宏 pdf扫描版
randyjin的博客
04-01 723
新手学DIV+CSS商业网站布局从入门到精通（实战案例版）系统地讲解了CSS的基础知识和实际运用技术，通过大量实例对CSS进行深入浅出的分析，主要包括CSS的基本语法和概念，系统讲解CSS布局模型、CSS安全性、CSS重用性、CSS合作开发、CSS商业开发规范。着重讲解如何用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时，掌握CSS+DIV的精髓。《新手学DIV+CSS...
CSS 布局案例：不会还有人不会布局吧
甜心森的博客
10-23 808
一文搞定网页布局，CSS 布局。包含行水平居中，垂直居中，两栏布局，三栏布局，粘性布局，瀑布流布局。浮动布局，定位布局，弹性布局，侧边栏宽度可调节布局。
经典css布局案例
weixin_34279246的博客
02-11 2030
经典css布局案例 1、CSS浮动 包括：块元素和行内元素、display属性、浮动float。块元素和行内元素的区别是：块元素有大小，而行内元素没有；块元素默认单独占一行，行内元素都在同一行。 既然块元素和行内元素有各自的特点，当我们需要来回切换他们的模式时，该怎么做呢？例如想要块元素都按行排列。这时，就引入了display属性，它是规定元素应该生成的框的类型，即可以让块元素和...
【实战】 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（七）
最新发布
程序边界
07-02 893
区别于react的功能组件emotion组件我们称其为样式组件新建gap?> * {/* 直接子元素强制控制样式 */important;important;> * {/* 直接子元素强制控制样式 */important;important;} `=>gap?> * {/* 直接子元素强制控制样式 */important;important;} `gap?> * {/* 直接子元素强制控制样式 */
利用CSS+DIV进行网页布局
热门推荐
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx
12-23
"HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx" 在本章中，我们探讨了网页设计的基础知识，包括HTML5和CSS3的应用。首先，网页设计是一门综合性的学科，它融合了商业策划、平面设计、编程语言和数据库管理等多...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值