新课：PHP零基础（CMS开发）教学！
立即报名web前端基础（学习html和css我们可以做什么）
11分钟45秒html基础
HTML中的常用标签及属性（文档头部 head）
HTML中的常用标签及属性（文本 字体格式化）
HTML中的常用标签及属性（超链接）
HTML中的常用标签及属性（列表）
HTML中的常用标签及属性（form表单）
HTML中的常用标签及属性（表格）
css基础
CSS中的盒模型
CSS中的边框样式
CSS中的背景控制
块级元素和行内元素相互转换
CSS中的定位
CSS中的浮动
常用导航布局案例
简单CSS3下拉菜单效果实现
依然5年前
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块元素和行内块元素相互转换</title> <style type="text/css"> p{display:inline;width: 200px;height: 200px;background-color: #CCC} b{display:block;} /*div{display:inline-block;height: 30px; width: 400px;background-color: pink}*/ .box{width: 100px;height: 40px;background-color: #ccc;line-height: 40px;text-align: center;} .main{width: 100px;height: 100px;background-color: pink;line-height: 100px;text-align: center;display:none;} .box:hover .main{display:block;} </style> </head> <body> <p>块级元素转换为行内元素</p><span>123</span> <b>行内元素转换为块级元素</b> <div>将标签转换为行内块元素</div><span>123</span> <div class="box">导航 <div class="main">小菜单 </div> </div> </body> </html>
0
37215年前
<html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style type="text/css"> *{padding:0px;margin:0px;} body{background-color:#ccc;} .nav{width:150px;height:20px;background-color:green;line-height:20px;text-align:center;color:#fff} .main{width:150px;height:88px;background-color:green;line-height:21px;text-align:center;color:#fff;display:none;border-top:1px yellow solid;} .nav:hover .main{display:block;} ul li{list-style:none;border-bottom:solid 1px yellow;} a{color:#fff;text-decoration: none;} </style> </head> <body> <div class="nav">导航 <div class="main"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">留言板</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> </body> </html>
0
