一个漂亮的暗系色调网站主页，外表美观。

最近尝试了一下一个网站主页设计，主要部分都完成了

外表还算美观，简单容易上手。

废话不多说，先上效果图：

首先初期布局大致是这样：

一个头部加一个尾部加主体内容（颜色为了方便大家辨认设置的）

在此基础上进行修正和样式设计

中间要多加注意的部分在导航栏和搜索框的地方：

上代码（有些学习过程的个人理解的注释删除了，为了不影响大家观看代码，有需要注释版的可以留言）：

<!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>

如需要完整代码可回复新人博主

一个漂亮的暗系色调网站主页，外表美观。相关推荐

如何在Joomla中创建一个漂亮的单页网站
我们都知道一个好的网站对于建立企业信誉的重要性.但是,在拥有统一的单页网站和多页网站的选项之间进行选择可能会很棘手.特别是如果您是 Joomla 和 Web 开发的新手. 随着移动和社交媒体用户的增加 ...
Python Web实战：Flask + Vue 开发一个漂亮的词云网站
作者:snowspace@掘金前言大家好,我是菜鸟哥!Python里面两大最牛的Web框架,一个是Django,一个是Flask .今天就分享一个用Flask做的词云生成网站,非常有意思的小web ...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
用HTML+CSS做一个漂亮简单的音乐网站
用HTML+CSS+JS做一个漂亮简单的公司网站（JavaScript期末大作业）
html怎么把一段文字设置为连接到下一个网页的按钮,为主页添加一个漂亮的按钮（上）_html...
是不是在做网页时,为按钮的制作发过愁啊?用图片做按钮的话,影响速度,不用图片,网页里自带的按钮真的是不感恭维,真是最近比较烦,其实,有了css(Cascading Style Sheet的缩写,层叠样 ...
旅游网站的主页代码_一个在优化的网站主页内容应该如何设计？
现在搜索引擎上面的网站只要是互联网行业的网站都是做了优化的只能说是效果好与不好,只要是注重做优化的网站都会非常重视网站主页的设计,那么一个在优化的网站主页内容应该如何设计呢?接下来我们就来了解一下: ...
PS设计漂亮网站主页图片的实例教程
制作一个好的网页,需要花费大量的时间,包含的内容也是非常多的,其中有按钮.横幅.图标及其它素材等.制作的时候先规划好大致的框架,然后由上至下慢慢细化各部分的内容,注意好整体搭配.最终效果一.在我们打 ...
PS网页设计教程XXIV——从头设计一个漂亮的网站
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
[Web]如何利用Boostrap框架搭建一个还可以的静态网站（三_主页）
文章目录返回总结整体效果思路各个组件代码导航栏 LOGO 滚动时间标题线图词模块页脚代码独属css文件 indexCss1.css html代码 index.html 返回总结如 ...

一个漂亮的暗系色调网站主页，外表美观。

一个漂亮的暗系色调网站主页，外表美观。相关推荐

最新文章

热门文章