HTML+CSS 小灰灰 2022-04-06 05:54 130阅读 0赞 ### 文章目录 ### * CSS基本选择器 * * 元素选择器 * 类选择器 * id选择器 * 其他选择器 * * 层级选择器 * 属性选择器 * 引入方式(习惯在head中引入) * 抽象的浮动 * 案例:注册页面代码 # CSS基本选择器 # ## 元素选择器 ## 选择div <style> div{ font-size: 30px; color: pink; } </style> ## 类选择器 ## 选择class="div2"的元素 <style> .div2{ font-size: 30px; color: gold; } </style> ## id选择器 ## 选择id="div5"的元素 <style> #div5{ font-size: 30px; color: yellow; } </style> # 其他选择器 # ## 层级选择器 ## 选择div 下层的p元素 <style> div p{ font-size: 30px; color: green; } </style> <div> <p>即选择这个p标签元素</p> </div> ## 属性选择器 ## 选择含有相对应属性的标签元素 <style> input[type='text']{ background-color: red; } input[type='password']{ background-color: blue; } </style> # 引入方式(习惯在head中引入) # 1.内部引入 <style type="text/css"> div{ font-size: 30px; color: pink; } </style> 2.行内引入 <div style="font-size: 20px;color: blue;"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> 3.外部引入 <link rel="stylesheet" href="style.css" type="text/css"/> # 抽象的浮动 # <style> #one{ border: 1px solid red; width: 600px; height: 150px; float: left; } #two{ border: 1px solid black; width: 600px; height: 190px; float:left; } #three{ border: 1px solid blue; width: 600px; height: 150px; float: left; } /*清除浮动*/ /*#clear{ clear: both; }*/ </style> # 案例:注册页面代码 # <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首页</font> </a> <a href="#"> <font color="white">手机数码</font> </a> <a href="#"> <font color="white">电脑办公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用电器</font> </a> </td> </tr> <!--3.注册表单--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一个十行二列的表格--> <form action="#" method="get" name="regForm"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px"/> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px"/> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> <!--4.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情链接和版权信息--> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </td> </tr> </table> </body> </html>
相关 HTMLCSS学习笔记(二十三)GRID布局 GRID布局 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的 拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 88 阅读
相关 HTMLCSS学习笔记(二十四)浏览器兼容 浏览器兼容 浏览器 ![18d351598399497bb326248e9b1219fe.png][] 浏览器大战 ![32ff149e3df74d5e8868 ゝ一纸荒年。/ 2023年10月06日 15:28/ 0 赞/ 89 阅读
相关 HTMLCSS学习:移动端项目准备工作(笔记二十) 移动端项目准备工作 meta标签的设置 <!-- H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 --> <meta name="viewpor 阳光穿透心脏的1/2处/ 2023年10月06日 15:26/ 0 赞/ 31 阅读
相关 HTMLCSS小白——浮动模型、两个经典bug(bfc解决四种方式)、导航栏、伪元素、文字溢出处理 文字溢出处理 <!DOCTYPE html> <html> <head> <title></title> <style typ 叁歲伎倆/ 2023年07月10日 11:30/ 0 赞/ 46 阅读
相关 HTMLCSS小白——盒子模型,绝对定位和相对定位 <!DOCTYPE html> <html> <head> <title></title> <style type="text/cs 水深无声/ 2023年07月10日 08:10/ 0 赞/ 39 阅读
相关 htmlcss使用及html5新特性笔记整理 【html基础】 Hyper text markup language 超文本标签语言。不是一种编程语言,而是一种标记语言标记语言是一套标记标签 开发工具 女爷i/ 2023年03月03日 05:59/ 0 赞/ 23 阅读
相关 音乐社交类登录注册htmlcss3+html5模板 [下载地址][Link 1] 一款通用的社交平台网站登录注册表单切换页面模板。支持手机验证码,图片验证码,第三方登录等功能。 ![8832d92220fd03c4fcef1 超、凢脫俗/ 2022年09月14日 00:27/ 0 赞/ 269 阅读
还没有评论,来说两句吧...