SanS三石导航页 SanS三石导航页

HTML+CSS小案例学成在线之实战代码

5个月前发布 SanS三石
30 0 0

#头条创作挑战赛#

#大有学问#

整个网页布局划分为四部分：top、nav、main、footer。

确定公共CSS部分

/* 清除浏览器默认设置 */
* {
    margin: 0;
    padding: 0;
}

/* 背景颜色 */
body {
    font-family: Microsoft YaHei;
    background-color: #f3f6f6;
}
.bGw {
    background-color: #ffffff;
}

/* li标签 */
dl,li {
    list-style: none;
    float: left;
}

/* 标题标签 */
h3 {
    font-weight: 400;
}

/* a标签 */
a {
    text-decoration: none;
    color: #050505;
}
img {
    /* 消除图片与其他盒子之间的缝隙 */
    display: block !important;
}

/* 版心宽度 */
.boxBX {
    width: 1200px;
    margin: 0 auto;
}

/* 浮动 */
.fL {
    float: left;
}
.fR {
    float: right;
}

/* 清除浮动 */
.clearF {
    overflow: hidden;
}

/* 字体大小 */
.fS12 {
    font-size: 12px;
}
.fS14 {
    font-size: 14px;
}
.fS16 {
    font-size: 16px;
}
.fS18 {
    font-size: 18px;
}
.fS20 {
    font-size: 20px;
}

/* 字体颜色 */
.fCfff {
    color: #ffffff;
}
.fC050505 {
    color: #050505;;
}
/* 鼠标悬停效果 */
.main-center a:hover,
.main-bottom a:hover,
.fC00a4ff {
    color: #00a4ff;
}
.fC494949 {
    color: #494949;
}
.fCa5a5a5 {
    color: #a5a5a5;
}
.fCff7c2d {
    color: #ff7c2d;
}
.fC999999 {
    color: #999999;
}
.fC868686 {
    color: #868686;
}
.fC666666 {
    color: #666666;
}
.fC333333 {
    color: #333333;
}

/* margin值 */
.mR0 {
    margin-right: 0px !important;
}
.mL0 {
    margin-left: 0px !important;
}
.mB21 {
    margin-bottom: 21px;
}
.mB15 {
    margin-bottom: 15px;
}
.mB22 {
    margin-bottom: 22px;
}
.mB41 {
    margin-bottom: 41px;
}

/* padding值 */
.pT0 {
    padding-top: 0 !important;
}

top部分

<div class="top boxBX clearF">
  <img src="./images/logo.png" alt="" class="logo fL">
    <ul class="fL fS18">
      <li><a href="#">首页</a></li>
      <li><a href="#">课程</a></li>
      <li><a href="#">职业规划</a></li>
    </ul>
  <div class="search fS14 fL">
   <input type="search" value="输入关键词" class="fL">
   <img src="./images/search_03.png" alt="" class="fR">
  </div>
  <div class="user fL">
   <img src="./images/头像.png" alt="" class="fL">
   <span href="#" class="fS14 fL">qq-leishui</span>
  </div>
</div>
/* top部分 */
.top {
    height: 42px;
    padding: 30px 0;
}
.top .logo {
    width: 190px;
}
.top ul {
    line-height: 38px;
    margin-left: 75px;
}
.top a {
    color: #050505;
    padding: 10px;
    margin-right: 25px;
}
.top a:hover { 
    border-bottom: 2px solid #00a5fe;
}
.search {
    width: 410px;
    height: 40px;
    margin-left: 60px;
    border: 1px solid #00a4fe;
}
.search input {
    width: 360px;
    height: 38px;
    background-color: #f3f6f6;
    border: none;
    color: #bfbfbf;
    padding-left: 19px;
    /* 去除search标签在获取焦点时出现的黑色外边框 */
    outline: none;
}
.user {
    width: 120px;
    color: #666666;
    margin-left: 30px;
    line-height: 42px;
}
.user img {
    padding: 6px 5px;
}
HTML+CSS小案例学成在线之实战代码

top代码运行图

nav部分

HTML+CSS小案例学成在线之实战代码

html代码

/* nav */
.nav {
    height: 420px;
    background-color: #1c056c;
}
.nav-bgimg {
    height: 420px;
    background-image: url(../images/banner2.png);
}
.nav-left {
    width: 150px;
    padding: 24px 20px 0px;
    background: rgba(0, 0, 0, 0.3);
}
.nav-left li {
    width: 150px;
    height: 44px;
}
.nav-left a,
.nav-left span {
    color: #ffffff;
}
.nav-left a.liTs,
.nav-left span.liTs {
    color: #00b4ff;
}

.nav-center {
    width: 170px;
    margin: 373px 0 34px 298px;
}
.nav-center li {
    width: 13px;
    height: 13px;
    border-radius: 13px;
    margin-right: 15px;
    background: rgba(255, 255, 255, 0.4);
}
.nav-center .liW21 {
    width: 21px;
    background-color: #ffffff;
}
.nav-right {
    width: 228px;
    height: 300px;
    margin: 50px 0 70px;
}
.nav-right h3 {
    height: 48px;
    font-weight: 600;
    background-color: #9acfea;
    text-align: center;
    line-height: 48px;
}
.nav-right-bottom {
    padding: 11px 14px;
}
.nav-right-bottom li {
    width: 200px;
    height: 40px;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
}
.nav-right-bottom p {
    color: #4e4e4e;
}
.nav-right-bottom .mL {
    margin-left: 8px;
}
.nav-right-bottom .fCa5 {
    color: #a5a5a5;
}
.nav-right-bottom .but {
    width: 198px;
    height: 38px;
    color: #00a4ff;
    font-weight: 600;
    text-align: center;
    line-height: 38px;
    border: 1px solid #23b1fe;
    margin-top: 5px;
}
HTML+CSS小案例学成在线之实战代码

nav代码运行图

main部分

所有main的内容都包含在main总盒子中。

main内容太多无法完全在一个代码块里写，提前把总盒子摘出来。逐个写各部分的代码。

<div class="main boxBX"></div>
  • menu部分
<div class="menu bGw">
  <ul class="menu-left fS16 fL">
    <li><a href="#" class="fC00a4ff liTsOne">精品推荐</a></li>
    <li><a href="#">JQuery</a></li>
    <li><a href="#">Spark</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">JavaWeb</a></li>
    <li><a href="#">MySQL</a></li>
    <li class="liBorN"><a href="#">JavaWeb</a></li>
   </ul>
   <a href="#" class="menu-right fS14 fC00a4ff fR">修改兴趣</a>
</div>

.menu {
    height: 16px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 22px 0;
    margin: 8px 0 35px;
}
.menu-left {
    width: 895px;
}
.menu-left li {
    padding: 0 34px;
    border-right: 1px solid #bfbfbf;
}
.menu-left .liTsOne {
    font-weight: 600;
}
.menu-left .liBorN {
    border-right: none;
}
.menu-right,
.footer-right {
    margin-right: 27px;
}
HTML+CSS小案例学成在线之实战代码

menu代码运行图

  • main-top
<!-- main-top模块 -->
         <div class="main-top">
            <!-- 精品推荐标题 -->
            <div class="mB21 clearF">
                <h3 class="fL fS20 fC494949">精品推荐</h3>
                <a href="#" class="fR pB fS12 fCa5a5a5">查看全部</a>
            </div>
            <!-- 精品推荐内容第一行 -->
            <ul class="liHover mB15 clearF">
                <li>
                    <img src="./images/Jp1.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp2.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Android 网络图片加载框架详解</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp3.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Angular 2 最新框架+主流技术+项目实战</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp4.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li class="mL0 mR0">
                    <img src="./images/Jp4.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
            </ul>
            <!-- 精品推荐内容第二行 -->
            <ul class="liHover clearF">
                <li>
                    <img src="./images/Jp1.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp2.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Android 网络图片加载框架详解</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp3.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Angular 2 最新框架+主流技术+项目实战</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li>
                    <img src="./images/Jp4.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
                <li class="mR0">
                    <img src="./images/Jp4.png" alt="">
                    <a href="#">
                        <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
                        <p class="fS12 pT0">
                            <span class="fCff7c2d">高级</span>
                            ·
                            <span class="fC999999">1125人在学习</span>
                        </p>
                    </a>
                </li>
            </ul>
         </div>

.main-top {
    margin-bottom: 38px;
}
.pB {
    line-height: 26px;
    padding-right: 27px;
}

/* 课程nav */
.liHover {
    height: 282px;
}
.liHover li {
    width: 228px;
    background-color: white;
    margin-right: 12px;
    margin-left: 2px;
}
.liHover li:hover {
    box-shadow: 0 0 2px 2px #c0c3c3;
}
.liHover img {
    width: 228px;
    height: 155px;
}
.liHover p {
    height: 30px;
    padding: 20px 24px 20px;
}
HTML+CSS小案例学成在线之实战代码

main-top代码运行图

  • main-center部分
<!-- main-center模块 -->

         <div class="main-center">

                <!-- 编程入门标题 -->

                <div class="mB21 clearF">

                    <h3 class="fL fS20 fC494949">编程入门</h3>

                    <ul class="main-center-nav">

                        <li><a href="#" class="fS16 fC868686">热门</a></li>

                        <li><a href="#" class="fS16 fC868686">初级</a></li>

                        <li><a href="#" class="fS16 fC868686">中级</a></li>

                        <li class="mR0"><a href="#" class="fS16 fC868686">高级</a></li>

                    </ul>

                    <a href="#" class="fR pB fS12 fCa5a5a5">查看全部</a>

                </div>

                <!-- 编程入门内容 -->

                <div class="mB41 clearF">

                    <img src="./images/Bc1.png" alt="" class="bC1 fL">

                    <div class="main-center-main fR">

                        <img src="./images/Bc2.png" alt="" class="bC2 mB22 ">
© 版权声明
上一篇

没有更多了...

下一篇

没有更多了...

相关文章

【转载】绿色港口赋能外贸高质量发展
SanS三石
19
【转载】教你10分钟搭建酷炫的个人博客
SanS三石
17
Day50 HTML简介及标签分类
SanS三石
38
618大促种草好物推荐，二合一笔记本华为MateBook E系列尽享高效智慧体验原创55岁于文华全家照，25岁女儿如花似玉，二婚丈夫也超级帅气！
SanS三石
40
Ipv6 DDNS（阿里云域名解析及证书配置）
SanS三石
37
如何构建一个自己的网站？
SanS三石
31

暂无评论

您必须登录才能参与评论！
立即登录
暂无评论...

热门文章

【转载】中国物联网“领航之城”，期待下一个辉煌！
77
【转载】北京暴雨没完没了，巴黎奥运会铁人三项推迟……极端天气影响越来越明显且直接，但全球气候治理仍面临挑战
50
50元n3160主板做软路由，iStoreOS物理机安装教程，Jellyfin刮削“公公不是亲爹”一文太精彩了，幽默又有趣，你细品！
45
【转载】夸克网盘拉新官方授权渠道怎么对接？盘点三个一手对接资源渠道平台！
39
OpenWrt折腾小记
38
本站网址来源于网络收集，对其内容不负任何责任。如有侵权、不妥之处，请反馈留言，我们会第一时间删除！

网站公告 关于本站 免责声明 站点地图

微信赞助SanS三石导航页

微信赞助

手机浏览站点SanS三石导航页

手机浏览站点
Copyright © 2022-2024 SanS三石导航页. All Rights Reserved. 萌ICP备20240170号
  由 OneNav 强力驱动