学成在线项目note

news2025/2/24 3:06:42

目录

一、index.html

1、头部header

2、轮播图banner

3、精品推荐

4、精品推荐课程

 5、footer

二、index.css

1、重要的代码

一、index.html

<!-- 网站的首页, 所有网站的首页都叫index.html, 因为服务器找首页都是找index.html -->

 <!-- 布局: 从外到内, 从上到下, 从左到右 -->

 <link rel="stylesheet" href="./css/index.css">

1、头部header

<!-- 头部header: 负责头部区域的样式, wrapper只负责版心效果 -->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </h1>

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="输入关键词"><button></button>
        </div>
        <!-- 用户 -->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>lilei</span>
        </div>
    </div>

2、轮播图banner

<div class="banner">
        <div class="wrapper">
            <div class="left">
                <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="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                </ul>
            </div>
            <div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </div>
                <a href="#" class="more">全部课程</a>
            </div>
        </div>
    </div>

3、精品推荐

<div class="goods wrapper">
        <h2>精品推荐</h2>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="xingqu">修改兴趣</a>
    </div>

ul是无序列表

 

ol是有序列表

4、精品推荐课程

 <div class="box wrapper">
        <div class="title">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>

        <div class="content clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  •  1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/course07.png" alt="">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  •  1125人在学习</p>
                    </a>
                </li>
           </ul>
        </div>
    </div>

 <!-- 版权 : 注意要清除浮动的影响, 课程的li 的 父级 -->

 <!-- li都浮动了, 脱标, 撑不开父级的高度 -->

 5、footer

 

<div class="footer">
        <div class="wrapper">
            <div class="left">
                <img src="./images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>

 <br> 换行

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

二、index.css

index.css是用来美化首页的

1、重要的代码

* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
}

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }


body {
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper {
    width: 1200px;
    margin: 0 auto;
}

 2、

margin：表示元素的外边距

·形如：margin:5px 10px 15px 20px;

依次表示 上右下左

上 margin-top 5px

右 margin-right 10px

下 margin-bottom 15px 

左 margin-left 20px

缺省情况下 margin:5px;

表示 上下左右都是5px

缺省情况下 margin:5px 10px;

表示 上下是5px,左右是10px

缺省情况下 margin:5px auto 10px;

表示 上是5px,左右是auto,下为10px

属性值是auto的时候,默认只支持margin-left:auto;和margin-right:auto; 上下暂时不支持auto

说明：margin:0 auto;可以实现一个有宽度的块元素盒子水平居中

3、导航

.nav {
    float: left;
    margin-left: 70px;
    height: 42px;
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a {
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px solid #00a4ff; */

    font-size: 18px;
    color: #050505;
}

.nav li a:hover {
    border-bottom: 2px solid #00a4ff;
}

 4、

 <!-- 搜索 -->

        <div class="search">

            <input type="text" placeholder="输入关键词"><button></button>

        </div>

/* 控制placeholder的样式 */

.search input::placeholder {

    font-size: 14px;

    color: #bfbfbf;

}

5、

.user img {

    /* 调节图片垂直对齐方式, middle:居中 */

    vertical-align: middle;

}

6、轮播图

/* 轮播图 */
.banner {
    height: 420px;
    background-color: #1c036c;
}

.banner .wrapper {
    height: 420px;
    background-image: url(../images/banner2.png);
}

 

.banner .left {
    float: left;

    padding: 0 20px;

    width: 190px;
    height: 420px;
    background-color: rgba(0,0,0, 0.3);

    /* 行高属于控制文字的属性, 能继承 */
    line-height: 44px;
}
.banner .left a:hover {
    color: #00b4ff;
}

7、

.banner .right h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}

.banner .right .content {
    padding: 0 18px;
}

.banner .right .content dl {
    padding: 12px 0;
    border-bottom:2px solid #e5e5e5;
}

.banner .right .content dt {
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .content dd {
    font-size: 14px;
    color: #4e4e4e;
}

.banner .right .more {
    display: block;
    /* margin: 4px 14px 0; */
    margin: 4px auto 0;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;

    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;

    text-align: center;
    line-height: 40px;
}

padding设置方法：
padding:10px 四周
padding:10px 20px 上下 左右
padding:10px 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上右下左

给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

left,right,center,这三个取值。

text-align属性的设置，对于块级元素是无效的，但是对于行内元素是可以起作用的。

通过给父元素设置line-height来实现垂直居中，line-height值和父元素高度值相同。

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

 8、

box-shadow: 0px 2px 3px 0px 
		rgba(118, 118, 118, 0.2);

  

.goods li a {
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}

.box .content li:nth-child(5n) {
    margin-right: 0;
}

 9、

/* 版权 */
.footer {
    margin-top: 40px;

    padding-top: 30px;

    height: 417px;
    background-color: #fff;
}

 <a href="#">下载APP</a>

.footer .left a {
    display: inline-block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;
}

display属性详解_display详解_木森林哥哥的博客-CSDN博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/619398.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

青岛科技大学｜物联网工程｜物联网定位技术（第三讲）｜15:40

青岛科技大学｜物联网工程｜物联网定位技术（第三讲）｜15:40

目录 物联网定位技术&#xff08;第三讲&#xff09; 1. 试简述C/A码的作用、构成 请画出C/A码生成电路简图并给予原理性的说明 2. 试简述 P码的作用、构成 请画出P码生成电路简图&#xff0c;并给予原理性的说明 3. GPS信号是如何进行伪码扩频与解扩 请画图给予说明 4…
阅读更多...
Java的Object类和深拷贝和浅拷贝(面试题)

Java的Object类和深拷贝和浅拷贝(面试题)

1.java.lang.Object类的说明 1.Object类是所有Java类的根父类 2.如果在类的声明中未使用extends关键字指明其父类&#xff0c;则默认父类为java.lang.Object类 3.Object类中的功能(属性、方法)就具通用性。 属性&#xff1a;无 方法&#xff1a;equals() / toString() / ge…
阅读更多...
图片识别表格的方法有哪些？试试这几个好用的表格识别软件

图片识别表格的方法有哪些？试试这几个好用的表格识别软件

随着数字化时代的到来&#xff0c;越来越多的公司和个人需要处理大量的表格数据。这些数据往往以图片的格式存在&#xff0c;而手动输入这些数据非常耗费时间和精力。因此&#xff0c;图片识别表格软件正在成为一个不可或缺的工具。那么&#xff0c;图片识别表格软件哪个好呢&a…
阅读更多...
SAP从入门到放弃系列之CRP-Part1

SAP从入门到放弃系列之CRP-Part1

从我学习CRP(Capacity Requirement planning)过程&#xff0c;应该能分三部分来总结。这篇就总结一下我学到的基本配置和概念。 温馨提示 &#xff1a;又臭又长的系统配置内容放在了最后的章节。本文分三个部分&#xff0c;工作中心数据和工艺路线创建&#xff0c;生产订单能力…
阅读更多...
【Tomcat 部署及优化】

【Tomcat 部署及优化】

目录 一、Tomcat 安装部署1、Tomcat 介绍2、Tomcat 核心组件1、Tomcat 功能组件结构&#xff1a;2、Container 结构分析&#xff1a; 3、Tomcat 请求过程&#xff1a; 二、Tomcat 服务部署1.关闭防火墙&#xff0c;将安装 Tomcat 所需软件包传到/opt目录下2.安装JDK3.设置JDK环…
阅读更多...
六、docker安装ngxin部署若依前端

六、docker安装ngxin部署若依前端

1.第一次安装&#xff0c;不进行挂载数据卷&#xff0c; docker run \ -p 8060:80 \ --name nginx \ --privilegedtrue \ --restartalways \ -d nginx:1.17.82. 将配置信息复制到宿主机本地 # 将容器nginx.conf文件复制到宿主机 docker cp nginx:/etc/nginx/nginx.conf /data…
阅读更多...
代码随想录算法训练营第五十天|123.买卖股票的最佳时机III|188.买卖股票的最佳时机IV

代码随想录算法训练营第五十天|123.买卖股票的最佳时机III|188.买卖股票的最佳时机IV

LeetCode123.买卖股票的最佳时机III 动态规划五部曲&#xff1a; 1&#xff0c;确定dp数组以及下标的含义&#xff1a; 一天一共就有五个状态&#xff0c; 没有操作 &#xff08;其实我们也可以不设置这个状态&#xff09;第一次持有股票第一次不持有股票第二次持有股票第二…
阅读更多...
为什么代码签名需要添加时间戳？

为什么代码签名需要添加时间戳？

如果您是软件发行商或开发人员&#xff0c;那么您就会知道软件的成功通常取决于下载次数&#xff0c;这部分取决于用户对它的信任程度。因此&#xff0c;为了向用户保证并避免在下载或安装时出现不必要的警告消息&#xff0c;您采取了主动步骤&#xff0c;例如使用受信任的代码…
阅读更多...
uniapp和springboot微信小程序开发实战：开发环境准备以及技术选型

uniapp和springboot微信小程序开发实战：开发环境准备以及技术选型

文章目录 开发工具STSHBuilder X其他工具技术选型前端开发vueelementUI后端springbootmybatisplusJWT和shiro开发工具 STS STS是开发springboot项目的利器，是Eclipse的一个版本，全称是SpringToolSuite STS下载地址 HBuilder X 下载地址
阅读更多...
WWDC2023|苹果iOS 17系统更新：可共享AirTag

WWDC2023|苹果iOS 17系统更新：可共享AirTag

苹果正在召开的 WWDC 2023 开发者大会上&#xff0c;宣布推出了 iOS 17 系统。包含一些功能上的更新。 共享 AirTag iOS 17 引入了一项备受期待的 AirTag 功能&#xff0c;即与他人共享 AirTag。自推出以来&#xff0c;AirTag 只能由一个人拥有和使用&#xff0c;但在 iOS 17…
阅读更多...
如何做架构设计？ | 京东云技术团队

如何做架构设计？ | 京东云技术团队

也许您对软件设计存在一些疑惑&#xff0c;或者缺乏明确思路&#xff0c;那么本文将非常适合您。 1、设计很重要 我们可以看一下周边的事物&#xff0c;那些好的东西&#xff0c;他们并不会天然存在&#xff0c;都是被设计出来的&#xff0c;因此设计就是创造和改善事物的重要…
阅读更多...
基于BP神经网络对MNIST数据集检测识别

基于BP神经网络对MNIST数据集检测识别

基于BP神经网络对MNIST数据集检测识别 1&#xff0e;作者介绍2&#xff0e;基于BP神经网络对MNIST数据集检测识别2.1 BP神经网络介绍2.2 神经元模型2.3 激活函数2.4 BP神经网络基础架构2.5 BP神经网络正向传播反向传播 3&#xff0e;基于BP神经网络对MNIST数据集检测识别实验3.…
阅读更多...
三分钟，教你3种前端埋点方式！

三分钟，教你3种前端埋点方式！

目录 前言 埋点方式 基于ajax的埋点上报 介绍 代码实现 缺点 基于img的埋点上报 script及link的缺陷 基于img做埋点上报 基于Navigator.sendBeacon的埋点上报 介绍 作用 补充 例子 优势 总结 常见埋点行为 点击触发埋点 页面停留时间上报埋点 错误监听埋点…
阅读更多...
人工电场算法(AEFA)(含MATLAB代码)

人工电场算法(AEFA)(含MATLAB代码)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…
阅读更多...
8种Python异常检测算法总结

8种Python异常检测算法总结

异常检测是通过数据挖掘方法发现与数据集分布不一致的异常数据&#xff0c;也被称为离群点、异常值检测等等。本文为大家整理了8个常见的Python异常检测算法&#xff0c;希望对大家有所帮助 一、异常检测简介 异常检测是通过数据挖掘方法发现与数据集分布不一致的异常数据&…
阅读更多...
Centos7系统部署搭建Kafka集群

Centos7系统部署搭建Kafka集群

kafka集群搭建 一、环境准备1.1 服务器准备1.2 版本信息1.3 启动kafka环境1.3.1 获取kafka1.3.2 启动kafka1.3.2.1 kafka && ZooKeeper1.3.2.2 kafak && KRaft 1.4 创建主题1.5 事件写入主题1.6 事件读取1.7 停止kafka环境 二、搭建 kafka 集群2.1 ZooKeeper 集…
阅读更多...
chatgpt赋能python：Python如何读取照片

chatgpt赋能python：Python如何读取照片

Python如何读取照片 介绍 Python是一种高级编程语言&#xff0c;其简单易用、可扩展性强等特点&#xff0c;使其在数据分析、机器学习等领域得到了广泛应用。而在图像处理领域&#xff0c;Python同样也有着较为优异的表现。本文将介绍Python读取照片的方法&#xff0c;并探讨…
阅读更多...
普通2本，去过字节外包，到现在年薪30W＋的测试开发，我的2年转行心酸经历...

普通2本，去过字节外包，到现在年薪30W＋的测试开发，我的2年转行心酸经历...

个人简介 我是一个普通二本大学机械专业毕业&#xff0c;17年毕业&#xff0c;19年转行&#xff0c;目前做IT行业的软件测试已经有3年多&#xff0c;职位是高级测试工程师&#xff0c;坐标上海… 我想现在我也有一点资格谈论关于转行这个话题&#xff1b;希望你在决定转行之前…
阅读更多...
Linux下面安装jdk和tomcat

Linux下面安装jdk和tomcat

1、jdk的安装 1、上传jdk到 opt目录下面 2、解压jdk tar -xvf jdk-8u281-linux-x64.tar.gz3、一般把jdk放到/usr/local &#xff08;软件的安装都是放到usr下面&#xff09; mv jdk1.8.0_281 /usr/local/4、配置环境变量 找到 /etc/profile 进行编辑修改 export JAVA_HOM…
阅读更多...
速下载 | 200页幻灯片图解新版《商用密码管理条例》

速下载 | 200页幻灯片图解新版《商用密码管理条例》

国家高度重视商用密码工作。2023年4月14日&#xff0c;国务院常务会议审议通过了《商用密码条例》&#xff08;以下简称《条例》&#xff09;修订草案。5月24日中华人民共和国中央人民政府网站正式公开修订后的正式稿全文。本次《条例》在密码法框架下进行了全面修订&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023