【无标题】

最新推荐文章于 2024-05-28 23:24:23 发布
最新推荐文章于 2024-05-28 23:24:23 发布
阅读量35 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sadfasfad/article/details/121913658
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成在线-不是所有的网站都叫学成在线</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- header头部模块开始 -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <!-- nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- user -->
        <div class="user">
            <img src="images/user.jpg" alt="">
            lilei-hanmm
        </div>
    </div>
    <!-- header头部模块结束 -->
    <!-- banner 部分start -->
    <div class="banner">
        <div class="w">
            <!-- 左侧 subnav  -->
            <div class="subnav">
                <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>
            <!-- 右侧 course -->
            <div class="course">
                <div class="course-hd">
                    我的课程表
                </div>
                <div class="course-bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>
                    <a  class="all" href="#">全部课程</a>
                </div>
            </div>
            
        </div>
    </div>
    <!-- banner 部分end -->
    <!-- 精品推荐开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <div class="goods-item">
            |      <a href="#">JQuery</a>
            |      <a href="#">Spark</a>
            |      <a href="#">MYsql</a>
            |      <a href="#">JQueryavaWeb</a>
            |      <a href="#">HTML</a>
            |      <a href="#">CSS</a>
        </div>
        <div class="mod">
            修改兴趣
        </div>
    </div>
 
    <!-- 精品推荐结束 -->
    <!-- 精品内容开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
                <li>
                    <img src="images/pic.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <p><span>高级</span>·1125人在学习</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 精品内容结束 -->
    <!-- 页脚开始 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="links">
                <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>
    </div>
    <!-- 页脚结束 -->
</body>
</html>

/*css 初始化代码 css reset*/
/*清除元素默认的内外边距*/
* {
    margin: 0;
    padding: 0;
}
/*清除列表样式*/
li {
    list-style: none;
}
/*去掉button 默认自带的边框*/
button {
    border: none;
}
body {
    background-color: #f3f5f7;
    /*方便写代码 一会别忘了删除*/
    /*height: 3000px;*/
}
a {
    text-decoration: none;
}
/*清除浮动的*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*版心 1200 水平居中*/
.w {
    width: 1200px;
    margin: auto;
}
/*header start*/
.header {
    height: 42px;
    /*background-color: pink;*/
    margin: 30px auto;
}
.logo {
    float: left;
    margin-right: 60px;
}
.nav {
    float: left;
}
.nav ul li {
    float: left;
}
.nav ul li a {
    display: block;
    height: 40px;
    padding: 0 10px;
    margin-right: 20px;
    line-height: 40px;
    font-size: 18px;
    color: #050505;
    text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}
.search {
    float: left;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 340px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    padding-left: 20px;
    color: #ccc;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    background: url(images/btn.png);
}
.user {
    float: left;
    height: 42px;
    line-height: 42px;
    margin-left: 30px;
    font-size: 14px;
    color: #666;
}
/*banner start*/
.banner {
    height: 420px;
    background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
.subnav {
    float: left;
    width: 150px;
    height: 420px;
    padding: 0 20px;
    /*背景半透明*/
    background: rgba(0, 0, 0, .3);
}
.subnav li {
    height: 45px;
    line-height: 45px;
}
.subnav li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}
.subnav li a:hover {
    color: #00b4ff;
}
.subnav  span {
    float: right;
}
 
.course {
    float: right;
    margin-top: 50px;
    width: 230px;
    height: 300px;
    background-color: #fff;
}
.course-hd
{
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: #9bceea;
    font-size: 18px;
    color: #ffffff;
    font-weight: 700;
}
 
.course-bd {
    padding: 0 15px;
}
 
.course-bd ul {
    padding-top:10px;
}
 
.course-bd li {
    height: 50px;
    margin-top:10px;
    border-bottom: 1px solid #efefef;
}
 
.course-bd li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
 
.course-bd li p {
    font-size: 12px;
    color: #a5a5a5;
}
 
.all {
    display: block;
    margin-top: 10px;
    height: 38px;
    line-height: 38px;
    border:1px solid #22b0ff;
    text-align: center;
    color: #00a4ff;
    font-size: 16px;
}
 
.goods {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    margin-top: 10px;
    /* 设置盒子阴影 */
    box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
 
.goods h3 {
    float: left;
    margin: 0 30px;
    font-size: 16px;
    color: #00a4ff;
}
 
.goods-item {
    float: left;
    color: #bfbfbf;
}
 
.goods-item a {
    margin: 0 30px;
    font-size: 16px;
    color: #050505;
}
.mod {
    float: right;
    font-size: 14px;
    color: #00a4ff;
    margin-right: 30px;
}
 
.box {
    margin-top: 15px;
}
 
.box-hd {
    height: 60px;
    line-height: 60px;
}
 
.box h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
 
.box a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
}
 
.box-bd {
    width: 1215px;
}
 
.box-bd li {
    float: left;
    width: 228px;
    height: 270px;
    margin-bottom: 15px;
    margin-right: 15px;
    background-color: #fff0;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
 
.box-bd img {
    width: 100%;
}
 
.box-bd h4 {
    margin: 20px;
    font-size: 14px;
    color: #050505;
}
 
.box-bd p {
    margin: 0 20px;
    font-size: 12px;
    color: #999999;
}
 
.box-bd span {
    color: #ff7c2d;
}
 
.footer {
    padding-top:30px;
    height: 420px;
    background-color: #fff;
}
 
.copyright {
    float: left;
}
 
.copyright p {
    margin: 30px 0;
    font-size: 12px;
    color: #666666;
}
 
.copyright a {
    display: block;
    width: 120px;
    height: 35px;
    line-height: 35px;
    border:1px solid #00a4ff;
    text-align: center;
    color: #00a4ff;
}
 
.links {
    float: right;
}
 
.links dl {
    float: left;
    margin-left: 100px;
}
 
.links dt {
    height: 30px;
    font-size: 16px;
    color: #333333;
}
 
.links dd {
    font-size: 12px;
    color: #333333;
}

sadfasfad
关注
html5简单的小网站页面
08-28
这个对与一个初学者非常好这个页面涵盖好多html5 的新特效，可以下载学习一下。不后悔
html 个人简易小网站
11-07
是用HTML编写的个人简易小网站，只有简单的页面，没有数据，里面有在网页中插入视频，音乐，图片，表单，以及走马灯等的例子。对刚学HTML的人会有点帮助。
学成在线2021122
m0_61686869的博客
12-02 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --> <div class...
简单的小网页（第一次作业）
qq_51779101的博客
05-08 618
任务要求 自己新建个html文件 1.给网页加一个标题。 1.加标题一级和三级标签。 3.加入a标签链接到https://www.baidu.com/，并在a标签里放入一张图片。 4.再加个a标签链接https://www.baidu.com/，写上文字“百度一下，你就知道” 5.加一段话。 6.以上每一条之后都要换行。 <!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF.
简单小网页制作一
weixin_43797908的博客
06-29 1265
效果： HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引进css--> <link rel="stylesh...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
简单的个人小网页制作
01-11
简单的小网页制作，适合初学者，可以观摩，可以Copy！
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
简单明了的小型信息网站（哪位大哥可以提供一个）
weixin_42573112的博客
12-17 1786
只需要供客户提供需求，然后后台可以查询就可以。
一个简单的网站（适合课设）
qq_44888570的博客
12-20 2267
前言 这是我帮同学写的一个很简单的网站，没有后端，主要的技术有jQuery（包括Ajax），模仿的是h2j的天猫仿站项目。 可以用于web课设，或者其他前后端交互的界面。下面看下预览图。 由于时间紧，没做响应式布局。 分享出来给同学们应应急~ 主页 登录 注册 商品详情页 源码 取的话，记得点个赞！！！ 链接：https://pan.baidu.com/s/1G0DT13MRdcFk_ZtBp5nqFQ 提取码：z1ed 复制这段内容后打开百度网盘手机App，操作更方便哦 ...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
简单制作一个小网站
m0_55684960的博客
12-02 313
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --> <div class=".
制作一个简单HTML旅游网站（HTML+CSS+JS）云南旅游网页设计与实现5个页面
最新发布
爱敲代码的卡拉米的博客
05-28 2945
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
自己做了个网站，在线调查表制作网站
yeaha
11-25 605
慢慢吞吞的做了一年多，终于告一段落，未来还会继续开发 http://www.surveypie.com/ 免费使用，如果可以反馈点访问速度、使用体验就谢谢了 js使用的extjs库，第一次在开发中大量使用js，感觉server端和browser端的平衡没有把握好，有点ajax过度了，下个版本要好好反省反省...
css-学成在线页面
xiaoyuyully的博客
02-20 250
学成在线页面 app.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值