学成在线

于 2020-02-11 02:21:36 发布
阅读量8.1k 收藏 28
点赞数 3
分类专栏： web前端 # practice 文章标签： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39477501/article/details/104257401
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="13_prac.css">
</head>
<body>
    <!-- 页面头部分 -->
    <header>
        <nav>
            <div class="logo">
                <img src="images/logo.png">
            </div>
            <div class="navbar">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <div class="personal">
                <a href="#">个人中心 <img src="images/ld.png"></a>
                <a href="#"><img src="images/pic.png">xiaoqian</a>
            </div>
            <div class="search"><!-- 搜索框 -->
                <input type="text" placeholder="请输入关键词" /><!-- 占位符 -->
                <input type="submit" value="" />
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="banner-in container">
            <div class="slidebar">
                <ul>
                    <li><a href="#">前端开发 <span> > </span> </a></li>
                    <li><a href="#">后端开发 <span> > </span> </a></li>
                    <li><a href="#">移动开发 <span> > </span> </a></li>
                    <li><a href="#">人工智能 <span> > </span> </a></li>
                    <li><a href="#">商业预测 <span> > </span> </a></li>
                    <li><a href="#">云计算&大数据 <span> > </span> </a></li>
                    <li><a href="#">运维&从测试 <span> > </span> </a></li>
                    <li><a href="#">UI设计 <span> > </span> </a></li>
                    <li><a href="#">产品 <span> > </span> </a></li>
                </ul>
            </div>
            <dl class="timetable">
                <dt>我的课程表</dt>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <h4>继续学习 程序语言设计</h4>
                    <p>正在学习-使用对象</p>
                </dd>
                <dd>
                    <a href="#">全部课程</a>
                </dd>
            </dl>
            <ul class="circle">
            	<li class="current"></li>
            	<li></li>
            	<li></li>
            	<li></li>
            	<li></li>
            	<li></li>
            </ul>
        </div>
    </div>
    <div class="recommend container">
        <a href="#">精品推荐</a>
        <a href="#">JQuery</a>
        <a href="#">Spart</a>
        <a href="#">MySQL</a>
        <a href="#">JavaWeb</a>
        <a href="#">MySQL</a>
        <a href="#">JavaWeb</a>
        <a href="#">修改兴趣</a>
    </div>
    <div class="recom-products container clearfix"><!-- 精品推荐，未给高度则需清除浮动 -->
    	<div class="recom-hd">
    		<h4>精品推荐</h4>
    		<a href="#">查看全部</a>
    	</div>
    	<div class="recom-bd">
            <ul>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic1.png">
                    <h5>Think PHP 5.0 博客系统实战项目演练</h5>
                    <p><span>高级</span> · 1125人在学习</p>
                </li>
    		</ul>
    	</div>
    </div>
    <footer>
    	<div class="container footer-in">
            <div class="footer-l">
                <img src="images/logo.png">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="footer-r">
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd>关于</dd>
                    <dd>管理团队</dd>
                    <dd>工作机会</dd>
                    <dd>客户服务</dd>
                    <dd>帮助</dd>
                </dl>
            </div>
        </div>
    </footer>
</body>
</html>
    * {
        margin: 0;
        padding: 0;/*清除内外边距*/
    }
    ul {
        list-style: none;/*去掉列表样式小点*/
    }
    .clearfix:before, .clearfix:after {/*清除浮动*/
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    a {
        color: #050505;
        text-decoration: none;/*取消下划线*/
    }
    .container {/*公共类,版心*/
        width: 1200px;
        margin: 0 auto;
    }
    body {
        background-color: #f3f5f7;/*整个页面的背景色*/
    }
    input {
        border: 0;
        box-sizing: border-box;/*css3盒子模型，border和padding包含到width里面*/
    }
    header {/*页面头部分*/
        height: 100px;
        overflow: hidden;
    }
    nav {
        height: 42px;
        margin: 26px auto;/*盒子水平居中*/
    }
    .logo {
        float: left;
    }
    .navbar {/*导航栏*/
        float: left;
        height: 42px;
        line-height: 42px;/*文字垂直居中，子元素继承*/
        margin-left: 50px;
    }
    .navbar li {
        float: left;/*三个标签一行显示*/
    }
    .navbar li a {
        padding: 0 8px;/*左右内边距*/
        display: block;/*a是行内元素，须转换为块级，继承高度*/
    }
    .navbar li a:hover{
        border-bottom: 2px solid #00a4ff;/*鼠标放上时底边框*/
    }
    .search {/*搜索框*/
        width: 410px;
        height: 38px;
        border: 1px solid #00a4ff;
        float: right;/*两个右浮动注意顺序*/
    }
    .search input[type=text] {/*属性选择器*/
        width: 360px;
        height: 38px;
        padding-left: 20px;
        float: left;
    }
    .search input[type=submit] {
        width: 50px;
        height: 38px;
        background: #00a4ff url(images/fa-search.phg) center center no-repeat;
        float: left;/*行内块元素之间会有空白缝隙，浮动消除空隙*/
    }
    .personal {/*个人中心*/
        float: right;
        height: 42px;
        line-height: 42px;
        margin: 0 15px 0 35px;
    }
    .personal img {
        margin: 0 8px;
    }
    .banner {
        height: 420px;
        background-color: #1c036c;
    }
    .banner-in {
        height: 420px;
        background: url(images/banner.jpg);
        position: relative;/*子绝父相*/
    }
    .slidebar {
        float: left;
        height: 420px;
        width: 190px;
        background: rgba(0,0,0,0.3);
    }
    .slidebar li a{
        color: #fff;
        font-size: 14px;
        padding: 0 20px;
        display: block;/*转换成块级元素*/
        height: 45px;/*单行垂直居中，有了行高不用给高度*/
        line-height: 45px;
    }
    .slidebar li a:hover {
        color: #00a4ff;
    }
    .slidebar li a span {
        float: right;
        font-family: arial;/*符号常用字体*/
    }
    .timetable {
        float: right;
        width: 230px;
        height: 300px;
        margin-top: 50px;
        background-color: #fff;
    }
    .timetable dt {
        height: 50px;
        line-height: 50px;
        background-color: #9bceea;
        text-align: center;/*文字水平居中*/
        color: #fff;
        font-weight: 700;/*加粗*/
        letter-spacing: 2px;/*字符间距*/
        margin-bottom: 10px;
    }
    .timetable dd {
        width: 193px;
        height: 60px;
        margin: 0 auto;
        border-bottom: 1px solid #ccc;
        padding-top: 12px;
        box-sizing: border-box;
    }
    .timetable dd:last-child {/*结构伪类选择器*/
        border: 0;
    }
    .timetable dd h4 {
        font-size: 16px;
        font-weight: normal;
        color: #4e4e4e;
    }
    .timetable dd p {
        color: #a5a5a5;
        font-size: 14px;
        margin-top: 5px;
    }
    .timetable dd a {
        height: 38px;
        border: 1px solid #00a4ff;
        display: block;
        text-align: center;
        line-height: 38px;
        color: #00a4ff;
        font-weight: 700;
    }
    .timetable dd a:hover {
        color: #fff;
        background-color: #00a4ff;
    }
    .circle {
    	width: 180px;
    	height: 22px;
    		position: absolute;/*绝对定位*/
    	bottom: 10px;
    		left: 50%;
    		margin-left: -90px;
    }
    .circle li {
    	width: 12px;
    	height: 12px;
    	float: left;
    	background-color: rgba(255,255,255,0.4);
    	margin: 6px 8px;
    	border-radius: 50%;
        cursor: pointer;
    }
    .circle .current {
    	width: 19px;
    	border-radius: 5px;
    	background-color: #fff;
    }
    .recommend {
        height: 60px;
        line-height: 60px;
        background-color: #fff;
        margin-top: 8px;
        box-shadow: 0 2px 2px rgb(0,0,0,0.2);/*盒子阴影*/
    }
    .recommend a {
        padding: 0 30px;
        border-right: 1px solid #ccc;
    }
    .recommend a:first-child {
        color: #00a4ff;
    }
    .recommend a:hover {
        color: #00a4ff;
    }
    .recommend a:last-child {
        color: #00a4ff;
        border: 0;
        float: right;
        font-size: 14px;
    }
    .recom-products {
        margin-top: 35px;
    }
    .recom-hd {
        height: 40px;
    }
    .recom-hd h4 {
        float: left;
        color: #494949;
    }
    .recom-hd a {
        float: right;
        margin-top: 10px;
        margin-right: 30px;
        font-size: 14px;
        color: #a5a5a5;
    }
    .recom-hd a:hover {
        color: #00a4ff;
    }
    .recom-bd ul li {
        width: 228px;
        height: 270px;
        overflow: hidden;/*溢出隐藏*/
        box-shadow: 0 4px 4px rgba(0,0,0,0.2);
        float: left;
        margin-right: 15px;
        margin-top: 15px;
    }
    .recom-bd ul li:nth-child(5n) {
        margin-right: 0;
    }
    .recom-bd li h5,
    .recom-bd li p {
        padding: 0 20px 0 24px;
        margin-top: 12px;
    }
    .recom-bd li h5 {
        font-size: 14px;
        line-height: 22px;
        font-weight: normal;
    }
    .recom-bd li p {
        font-size: 12px;
        color: #999;
    }
    .recom-bd li span {
        color: #ff7c2d;
    }
    footer {
        height: 270px;
        margin-top: 100px;
    }
    .footer-in {
        padding-top: 30px;
    }
    .footer-l {
        float: left;
    }
    .footer-l p {
        font-size: 12px;
        line-height: 18px;
        color: #999;
        margin-top: 20px;
    }
    .footer-l a {
        display: block;
        width: 118px;
        height: 33px;
        border: 1px solid #00a4ff;
        font-size: 16px;
        text-align: center;
        line-height: 33px;
        margin-top: 15px;
        color: #22b0ff;
    }
    .footer-r {
        float: right;
        color: #333;
    }
    .footer-r dl {
        float: left;
        width: 226px;
    }
    .footer-r dt {
        font-size: 16px;
        height: 30px;
    }
    .footer-r dd {
        font-size: 12px;
        height: 20px;
    }
    .footer-r dd a:hover {
        color: #00a4ff;
        text-decoration: underline;
    }

代码效果参考网站http://www.like.bj.cn/#或者下图：

 

评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值