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

最新推荐文章于 2024-01-18 01:01:46 发布

置顶

qq_38959715

最新推荐文章于 2024-01-18 01:01:46 发布

阅读量9.9k

点赞数 4

分类专栏： CSS HTML 文章标签： HTML CSS 主页面

本文链接：https://blog.csdn.net/qq_38959715/article/details/79810371

版权

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

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

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

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

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

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

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

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

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

最低0.47元/天解锁文章

qq_38959715

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
7
评论
一个漂亮的暗系色调网站主页，外表美观。

最近尝试了一下一个网站主页设计，主要部分都完成了外表还算美观，简单容易上手。废话不多说，先上效果图：首先初期布局大致是这样：一个头部加一个尾部加主体内容（颜色为了方便大家辨认设置的）在此基础上进行修正和样式设计中间要多加注意的部分在导航栏和搜索框的地方：上代码（有些学习过程的个人理解的注释删除了，为了不影响大家观看代码，有需要注释版的可以留言）：&lt;!DOCTYPE html&gt;&lt;...
复制链接

扫一扫

专栏目录