最近尝试了一下一个网站主页设计,主要部分都完成了
外表还算美观,简单容易上手。
废话不多说,先上效果图:
首先初期布局大致是这样:
一个头部加一个尾部加主体内容(颜色为了方便大家辨认设置的)
在此基础上进行修正和样式设计
中间要多加注意的部分在导航栏和搜索框的地方:
上代码(有些学习过程的个人理解的注释删除了,为了不影响大家观看代码,有需要注释版的可以留言):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> <style type="text/css"> body{ background: linear-gradient(to bottom right,#101010,#808080); } #Container{ width: 1305px; max-height: 900px; margin: 0 auto; background: #1c1c1c; overflow: auto; } #search { width: 1305px; height: 38px; margin: 0 auto; color: #000101; } .bar{ height: 42px; float: left; } input, button { border: none; outline: none; } input { width: 1247px; height: 42px; padding-left: 13px; float:left; color: #808080; } button { height: 42px; width: 42px; float:left; } /*头部*/ #Header{ height:100px; background: linear-gradient(to bottom right,#101010,#808080); background: -webkit-linear-gradient(to bottom right,#101010,#808080); } #Header1{ height:100px; width: 1190px; float: left; } .header-h1{ font-size: 55px; font-style: italic; text-align: center; line-height: 40px; color: #F9F0DA; } #Header2{ height: 80px; font-size: 14px; float: left; color: #c9c8c8; } .a1,.a2{ margin: 20px; font-size: 18px; font-weight: 600; display: block; color:#c9c8c8 ; text-decoration:none; } .a3,.a4,.a5{ margin-right: 50px; font-size: 13px; font-size: 1rem; font-family: SimSun; text-decoration:none; display: inline; color:#c9c8c8 ; } #nav{ height: 40px; width: 1305px; } /*内容*/ #Content{ height:600px; margin-top:20px; background: linear-gradient(to bottom right,#1c1c1c,#ffffff); background: -webkit-linear-gradient(to bottom right,#1c1c1c,#ffffff); } #Content-Main{ width: 1000px; height: 530px; margin: 20px; float: left; background: #656565; } #Conten-Right{ width: 220px; height: 220px; margin:15px; float: left; background: #656565; box-shadow: 3px 3px 1px #000101; } #Conten-Right2{ width: 220px; height: 280px; margin:15px; float: left; background: #656565; box-shadow: 3px 3px 1px #000101; } /*尾部*/ #Footer{ width: 1305px; height: 30px; margin-top: 15px; padding-top: 5px; color: #c9c8c8; background: linear-gradient(to bottom right,#6E6E6E,#808080); background: -webkit-linear-gradient(to bottom right,#6E6E6E,#808080); } .Footer-P0{ width: 140px; float: left; } .Clear{ clear: both; } /*导航栏部分*/
/*搜索框*/ .bar { background: #211D1D; } .bar form { border-bottom: 2px solid #454545; background: #312e45; } .bar input, .bar button { background: transparent; } .bar button { top: 0; right: 0; } .bar button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } </style> </head> <body> <div id="Container"> <div id="Header"> <div id="Header1"> <h1 class="header-h1">Welcome to XXX home</h1> </div> <div id="Header2"> <a class="a1" href="login.html">login</a> <a class="a2" href="register.html">register</a> </div> </div> <div id="nav"> <ul class="menu"> <li><a href="home.html"> Home</a></li> <li><a href="#s1">Menu A</a> <ul class="submenu"> <li><a href="list.html">list</a></li> <li><a href="back.html">img</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> <li><a href="#">Submenu 7</a></li> <li><a href="#">Submenu 8</a></li> </ul> </li> <li class="active"><a href="#s2">Menu B</a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> <li><a href="#">Submenu 7</a></li> <li><a href="#">Submenu 8</a></li> </ul> </li> <li><a href="#">Menu C</a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> <li><a href="#">Submenu 7</a></li> <li><a href="#">Submenu 8</a></li> </ul> </li> <li><a href="#">Menu D</a> <ul class="submenu"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a></li> <li><a href="#">Submenu 7</a></li> <li><a href="#">Submenu 8</a></li> </ul> </li> <li><a href="#">Menu E</a></li> <li><a href="username.html">user</a></li> <li><a href="#">go to happay</a></li> </ul> </div> <div class="bar" id="search" align="left"> <form> <input type="text" placeholder="请输入您要搜索的内容..."> <button type="submit"></button> </form> </div> <div id="Content"> <div id="Content-Main"></div> <div id="Conten-Right"> <span></span> </div> <div id="Conten-Right2"></div> <div id="Conten-Trail"></div> </div> <div class="Clear"></div> <div id="Footer"> <p class="Footer-P0"></p> <a class="a3" href="help.html">帮助</a> <a class="a4" href="login.html">举报</a> <a class="a5" href="report.html">用户反馈</a> </div> </div> </body> </html>
如需要完整代码可回复新人博主