WEB前端静态网页（div+css）

最新推荐文章于 2024-04-26 22:14:41 发布
VIP文章 最新推荐文章于 2024-04-26 22:14:41 发布
阅读量1.4k 收藏 15
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44924495/article/details/131072282
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：：前端开发初学者，之前从事石油天然气设计行业

⛵ 源码获取 文末联系 ✈`

一、静态网页主要运用的技术

1、HTML:HTML是最基础的技术，用于定义页面的结构和内容。它包含了页面的主要元素，如标题、段落、列表、超链接、图像等等。
2、CSS:CSS用于控制页面的风格和布局。它可以控制字体、颜色、大小和页面的排版，使你的页面看起来更美观、高效、专业。

二、使用步骤

1.CSS代码（包括base.css/index.css）

代码如下（示例）：

base.css/* 基础公共样式 清楚默认样式 设置通用样式 */

*{
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li{
   
    list-style: none;
}

body{
   
    font: 14px/1.5 "Microsoft Yahei","Hiragino Sans GB","hEITI Sc", sans-serif;
}

a{
   
    color: #333;
    text-decoration: none;
}

index.css
/* 首页css样式 */
/* 版心居中 */
.wrapper{
   
    margin: 0 auto;
    width: 1200px;
}

body{
   
    background: #f3f5f7;
}

/* 头部区域 */
.header{
   
    height: 100px;
    background-color: white;
}

.header .wrapper{
   
    padding-top: 29px;
    display: flex;
}

/* logo */
.logo a{
   
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../images/logo.png);
    font-size: 0;
}

/* 导航 */
.nav{
   
    padding-left: 102px;
}

.nav ul{
   
    display: flex;
}

.nav li {
   
    margin-right: 24px;
}

.nav li a{
   
    display: block;
    padding: 6px 8px;
    line-height: 27px; 
    font-size: 19px;
}

/* acitve 类选择器 表示默认选中的a */
.nav li .active,
.nav li a:hover{
   
    border-bottom: 2px solid #00a4ff;    
}

/* 搜索 */
.search{
   
    display: flex;
    margin-left: 62px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input{
   
    flex: 1;
    border: 0;
    background-color: transparent;
    /* 去掉表单控件的焦点框 */
    outline: none;
}

/* ::placeholder 选中就是placeholder属性文字样式 */
.search input::placeholder{
   
    font-size: 14px;
    color: #999;
}

.search a{
   
    align-self: center;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
}


/* 用户 */
.user{
   
    margin-left: 32px;
    margin-top: 4px;
}


.user img{
   
    margin-right: 7px;
    /* vertical-align 行内快和行内垂直方向对齐方式 */
    vertical-align: middle;
}

.user span{
   
    font-size: 16px;
    color: #666;
}

/* banner 区域 */
.banner{
   
    height: 420px;
    background-color: #0092cb;
}

.banner .wrapper{
   
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../images/banner2.png);
}

/* 测导航 */
.banner .left{
   
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: #000;
    opacity: 0.42;
}

.banner .left a{
   
    display: block;
    height: 46px;
    background-image: url() no-repeat;
    line-height:42px;
    font-size: 16px;
    color: white;
}

.banner .left a:hover{
   
    color: #00a4ff;
}

/* 课程表 */
.banner .right{
   
    margin-top: 60px;
    border-radius: 10px;
    width: 218px;
    height: 305px;
    background-color: #209dd5;
}

.banner .right h3{
   
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

.banner .right .content{
   
    padding: 14px;
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
}

.banner .right dl{
   
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt{
   
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd{
   
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span{
   
    color: #00a4ff;
}

.banner .right dd strong{
   
    color: #7b7b7b;
    font-weight: 400;
}

.banner .right a{
   
    display: block;
    height: 32px;
    background-color: #00a4ff;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    border-radius: 15px;
}

/* 精品推荐 */
.recommend{
   
    display: flex;
    margin-top: 12px;
    padding: 0px 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
    line-height: 60px;
}

.recommend h3{
   
    font-size: 18px;
    color: #00a4ff;
    font-weight: 400;
}

.recommend ul{
   
    /* 除去标题和需改数据的尺寸 父级剩余尺寸都给了ul 实现吧修改兴趣挤到最右边 */
    flex: 1;
    display: flex;
}

.recommend ul li a{
   
    padding: 0 24px;
    border-right: 1px solid #e0e0e0;
    font-size: 18px;
}

.recommend ul  li:last-child a{
   
    border-right: 0;
}

.recommend .modify{
   
    font-size: 16px;
    color: #00a4ff;
}

/* 精品推荐课程 */
.course{
   
    margin-top: 15px;
}

/* 标题 公共类 与其他区域公用 */
.hd{
   
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
}

.hd h3{
   
    font-size: 21px;
    font-weight: 400;
}

.hd .more {
   
    font-size: 14px;
    color: #999;
}

/* 课程内容 */
.bd ul{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bd li{
   
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
    background-color: pink;
}

.bd li .pic{
   
    height: 156px;
}

.bd li .text{
   
    padding: 20px;
    height: 115px;
    background-color: #fff;
}

.bd li .text h4{
   
    margin-bottom: 13px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.bd li .text p{
   
    font-size: 14px;
    line-height: 20px;
    color: #999;
}

.bd li .text p span{
   
    color: #fa6408;
}

.bd li .text p i{
   
    font-style: normal;
}

/* 前端 */
.hd ul{
   
    display: flex;
}

.hd li{
   
    margin-left: 60px;
    font-size: 14px;
}

.hd li .active{
   
    color: #00a4ff;
}

.bd{
   
    display: flex;
    justify-content: space-between;
}

.bd .left{
   
    width: 228px;
    background-color: pink;
}

.bd .right{
   
    width: 957px;
    background-color: pink;
}

.bd .right .top{
   
    margin-bottom: 15px;
    height: 100px;
}

.footer{
   
    margin-top: 60px;
    padding-top: 60px;
    height: 273px;
    background-color: #fff;
}

.footer .wrapper{
   
    display: flex;
    justify-content: space-between;
}

.footer .left{
   
    width: 440px;
    /* background-color: pink; */
}

.footer .left P{
   
    margin-top: 24px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 17px;
    color: #666;
}

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

.footer .right{
   
    display: flex;
}

.footer .right dl{
   
    margin-right: 130px;
}

.footer .right dt{
   
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 23px;
}

.footer .right a{
   
    font-size: 14px;
    color: #666;
    line-height: 24px;
}


<!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">
    <title>学成在线</title>
    <!-- 先清除在设置 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css"
最低0.47元/天 解锁文章
以后的以后还是以后
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web课程设计 网页设计 包含js，div+css布局
03-14
精心制作的web课程设计，包含javascript，div+css布局。
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 2868
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
html简单网页代码：使用html+css实现一个静态页面（含源码）
qq3200628753的博客
12-21 1577
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
Java学习篇——JavaWeb：CSS
zhang19971014的博客
04-06 868
CSS:层叠样式表： 作用:,美化页面. 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用 <h1 style="color: red;background-color: green">内联样式1</h1> 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用 <style> /*css注释*/ /*通过选择器找到元素然后再添加样式代码*/ ..
div是什么意思？HTML和CSS中div标签怎么用
lin123_00的博客
05-16 1万+
div是什么？div是什么意思？div标签怎么用，相信很多小白在学习的时候都会有这样的问题，那么下面我们来总结一下HTML和CSS中div标签怎么用？ 一：div是什么意思 div就是样式表中的定位技术，div的全称就是division，有时候我们也习惯叫图层，在html中，div有很多属性，正式这些属性组成才会形成美观的板块。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 二：HTML和CSS中div标签怎么用 1.使用div，首先第一步打开记.
Javaweb实验：静态网页制作
m0_72471315的博客
03-12 6634
这学期学校开设了javaweb这门课，这次也会随着实验的进度一直记录实验内容以上就是今天要记录的javaweb实验的全部内容了，html是一门标记语言，效果是非常直观的，可以在网页上直接显示出来，这对我们的学习非常有帮助。
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
HTML 链接
weixin_43006131的博客
10-06 215
HTML 超链接（链接） HTML使用标签 <a>来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签<a> 中使用了href属性来描述链接的地址。 默认情况下，链接将以以下形式出现在浏览器中： 一个未访问...
Web页面布局
qq_52570860的博客
07-14 730
Web 自适应布局是指使用 HTML 和 CSS 创建的布局，能够根据浏览器窗口的大小自动适应不同的布局。相反，自适应布局、响应式布局等动态布局方式越来越受到重视，因为这些布局方式能够根据不同设备的特性和屏幕大小，动态调整页面布局，提高用户体验。此外，需要注意的是，流式布局不是适合所有场景的。总的来说，响应式布局和弹性布局是目前比较流行的布局方法，因为它们能够更好地适应不同的屏幕尺寸和分辨率。需要注意的是，在实际开发中，自适应布局和响应式布局不是非此即彼的关系，它们可以结合使用，以提高网页的适配能力。
Web前端笔记|表格、＜div＞标签、＜span＞标签、列表、表单
HP_C2H2的博客
05-30 1197
表格；简单表格；表格的样式；表格的合并；使用标签；< div>标签；< span>标签；无序列表；有序列表；定义列表；表单；文本框和密码框；单选按钮和复选框；按钮；普通按钮；提交按钮；重置按钮；图像域和文件域；文本域和列表
用DIV+CSS技术设计我的家乡网站（web前端网页制作课作业）南宁绿城之d
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
web大作业 静态网页 HTML+CSS+JavaScript橙色的时尚服装购物商城
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
web前端加众多css、jQuery还有js的作业 静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计
12-31
静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的......
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 653
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 527
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
CSS引入的三种方式
weixin_59272777的博客
04-24 738
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
【React】CSS 局部样式
最新发布
小秀的博客
04-26 160
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 214
【代码】vuetify3.0+tailwindcss+vite最新框架。
前端页面 前端静态页面demo
05-16
这是一个简单的前端静态页面demo，包含了HTML、CSS和JS代码： HTML代码： ``` <!DOCTYPE html> 前端静态页面Demo <link rel="stylesheet" type="text/css" href="style.css"> <h1>Welcome to My Page <p>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值