html5+css3项目（企业网站之标题）

最新推荐文章于 2022-09-18 15:54:54 发布

Jack_King007

最新推荐文章于 2022-09-18 15:54:54 发布

阅读量2.1k

点赞数 2

分类专栏： Html5+css3入门文章标签： html5

本文链接：https://blog.csdn.net/Jack_King007/article/details/48383185

版权

Html5+css3入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

花了三天入了个门 css3+html5 跟着教学视频写个项目也就是企业网站只是单纯做一个记录

界面很简单第一栏两个div 装一个logo 和搜索框第二栏用div 装着 nav 写了导航栏先写好了架构后面一直做记录

html5 代码可以只看前面的代码后面不需要看

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>集团首页</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="head_wrapper">
    <header>
        <div class="container"></div>
        <div id="logo">
            <h1><a href="index.html"><img src="images/logo.jpg" alt="集团首页"></a></h1>
        </div>
        <div id="sousuo">
            <form action="index.html">
                <input type="text" placeholder="搜索其实很简单"><input type="submit" value="搜索">
            </form>
        </div>
     <div id="nav">
         <nav class="container">
             <ul>
                 <li class="on"><a href="index.html">集团首页</a></li><li>
                 <a href="piclist.html">产品列表</a></li><li>
                 <a href="list.html">新闻列表</a></li><li>
                 <a href="content.html">内容页面</a></li><li>
                 <a href="index.html">关于我们</a></li>
             </ul>
         </nav>
     </div>
    </header>
</div>
<div id="body_wrapper">
    <article>
        <section id="lunbotu"></section>
        <section id="xinwen"></section>
        <section id="huodong"></section>
    </article>
    <aside>
        <section id="bowen"></section>
        <section id="zhaoping"></section>
        <section id="lianxi"></section>
        <section id="zigongsi"></section>
    </aside>
</div>
<div id="foot_wrapper">
    <footer>

    </footer>
</div>



</body>
</html>

css 样式代码

/*选择所有元素的选择器*/
*{
margin: 0;
padding: 0;
}
/*选择所有body选择器*/
body{
 background-color: #f3f3f3;
    font-family: "微软雅黑";
}
/*选择 class="container" 的所有元素。 类选择器*/
.container{
    width: 1000px;
    margin:0 auto;
}
/*#用于子元素的选择器*/
div#logo{
    display: inline-block;
    vertical-align: top;
    width: 755px;
}
div#sousuo{

    display: inline-block;
    /*把元素的顶端与行中最高元素的顶端对齐*/
    vertical-align: top;
    margin-top: 58px;
    text-align: right;
    width: 240px;
}
input[type="text"] {
    font-family: "微软雅黑";
    background: #f3f3f3;
    border: solid 1px #ccc;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    padding-left: 10px;
    width: 165px;
    display: inline-block;
    vertical-align: top;
}
input[type="submit"] {
    font-family: "微软雅黑";
    background-color: #3598db;
    color: #fff;
    /*solid 实线*/
    border: solid 1px #3598db;
    height: 42px;
    display: inline-block;
    vertical-align: top;
    font-size: 20px;
    padding: 0 10px;
}
div#nav{
    background-color: #3598db;
    height: 60px;
}
div#nav nav li{
    display: inline-block;
    line-height: 60px;
    padding: 0 10px;
    border-right: solid 1px #2f89c5;
    -webkit-transition:background 1s linear;
    -moz-transition:background 1s linear;
    -ms-transition:background 1s linear;
    -o-transition:background 1s linear;
    transition:background 1s linear;
}
div#nav nav li.on,div#nav nav li:hover{
    background-color: #2f89c5;
}
div#nav nav a{
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
}

点击跳转源码地址

Jack_King007

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html5+css3项目（企业网站之标题）

花了三天入了个门 css3+html5 跟着教学视频写个项目也就是企业网站只是单纯做一个记录界面很简单第一栏两个div 装一个logo 和搜索框第二栏用div 装着 nav 写了导航栏先写好了架构后面一直做记录html5 代码可以只看前面的代码后面不需要看集团首页
复制链接

扫一扫