小白的前端学习日记HTML/CSS之---九宫格

来源：互联网发布：淘宝怎样取消货到付款编辑：程序博客网时间：2024/05/16 03:06

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>九宫格</title>    <link rel="stylesheet" href="test4.css" type="text/css"></head><body><ul>    <li><a href="#">Link one</a></li>    <li><b href="#">Link two</b></li>    <li><a href="#">Link three</a></li></ul><ul>    <li><b href="#">Link four</b></li>    <li><a href="#">Link five</a></li>    <li><b href="#">Link six</b></li></ul><ul>    <li><a href="#">Link seven</a></li>    <li><b href="#">Link eight</b></li>    <li><a href="#">Link night</a></li></ul></body></html>

css代码（css文件名为test4.css）：

ul{    float:right;    width:100%;    padding:0;    margin:0;    list-style-type:none;    position:relative;    left:35%;}a{    float:left;    width:50px;    text-decoration:none;    background-color: blueviolet;    color:black;    padding:50px 50px;    border: 1px solid black;}a:hover {background-color:#ff3300}b{    float:left;    width:50px;    text-decoration:none;    color:black;    background-color:mediumslateblue;    padding:50px 50px;    border: 1px solid black;    /*border-style: solid;*/    /*border-left:2px solid black;*/    /*border-right:2px solid black;*/}b:hover {    background-color:sandybrown;}li {    display:inline;}

结果显示：

案例很简单，有助于初学者理解“框模型”。

阅读全文

0 0