使用html+css-实现静态开源案例-学成网

最新推荐文章于 2023-08-09 10:31:18 发布
VIP文章 最新推荐文章于 2023-08-09 10:31:18 发布
阅读量1.2k 收藏 18
点赞数 1
分类专栏： 小项目 文章标签： html5 css3 前端 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44541948/article/details/107415347
版权

使用html+css实现-静态开源案例-学成网

在这里插入图片描述

此静态页面在2k分辨率下显示最佳
1080p 正常显示但是元素可能相对大
2k以上无法正常显示 2k以下均可兼容

本文代码与原版的psd文件
链接：https://pan.baidu.com/s/17-iE0iKpQeZSSer4AUCtdQ
提取码：wnm0


基础开发须知

开发系列工具

PhotoShop CC2019 事先预览效果 作为蓝图
Sublime3 编辑器 写代码开发
Chrome 编译器 看效果做测试

开发流程

1.创建存放工程的文件夹
2.创建首页index.html 等系列页面文件夹
3.创建样式存放的文件夹
4.创建images来存放图片
5.未完待续

CSS书写顺序

1.布局定位属性
display/position/float/clear/visibility/overflow等等

2.自身属性
width/height/margin/padding/border/background等等

3.文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word等等

4.其他属性(CSS3)
content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient等等

例如:
.jdc{
   
	display: block;
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 10px;
	padding: 20px 0;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	color: #333;
	background: rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

布局流程

1.必须确定页面的版心(可视区域的主要部分),测量得出
2.分析页面中的行模块，以及每个行模块中的列模块。
3.制作html结构。
4.通过DIV+CSS布局来控制页面整个模块

页面制作

版心作为固定存在的元素
可以写出固定样式 只要用到版心直接调用就可以了

.w{
   
	width: 1200px;
	margin: auto;
}

页面分析需要一行一行分析 不要分析一堆

小tips

本文样式主要通过

通过标准模式、浮动、定位 做完了整个页面 并且做了一些小细节方便后台接入

虽然是静态页面但是还是做了一些动态的样式
例如像一些按钮可变化 链接模块加入了阴影来让其有动态效果
代码风格按照企业标准来做的 但是有些小地方还是按照自己的想法写进去的(注释中有)

图片是psd中切出来的

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>学成在线-不是所有的人都能学会前端</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- 
	开发系列工具
	Ps 事先预览效果 作为蓝图
	sublime 编辑器 写代码开发
	chrome 编译器 看效果做测试
	-->

	<!-- 
	开发流程

	1.创建存放工程的文件夹
	2.创建首页index.html 等系列页面文件夹
	3.创建样式存放的文件夹
	4.创建images来存放图片
	5.未完待续
	 -->

	<!-- 
	CSS书写顺序

	1.布局定位属性
	display/position/float/clear/visibility/overflow

	2.自身属性
	width/height/margin/padding/border/background

	3.文本属性
	color/font/text-decoration/text-align/vertical-align/white-space/break-word

	4.其他属性(CSS3)
	content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient 等等
	
	例如:
	.jdc{
		display: block;
		position: relative;
		float: left;
		width: 100px;
		height: 100px;
		margin: 0 10px;
		padding: 20px 0;
		font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
		color: #333;
		background: rgba(0, 0, 0, 0.5);
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		-ms-border-radius: 10px;
		border-radius: 10px;
	}
	 -->

	<!-- 
	布局流程
	1.必须确定页面的版心(可视区域的主要部分),测量得出
	2.分析页面中的行模块，以及每个行模块中的列模块。
	3.制作html结构。
	4.通过div+CSS布局来控制页面整个模块

	 -->

	<!-- 页面制作
	版心作为固定存在的元素
	可以写出固定样式 只要用到版心直接调用就可以了

	.w{
		width: 1200px;
		margin: auto;
	}
	
	页面分析需要一行一行分析 不要分析一堆

	 -->
	

	
	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- 图标 -->
		<div class="logo">
			<img src="images/logo.png">
		</div>

		<!-- 导航 -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>

		<!-- 搜索 -->
		<div class="search clearfix">
			<input type="text" name="text" value="输入关键词">
			<button></button>
		</div>

		<!-- 用户登陆 需要调整vertical-align 使用户id和图片中线对齐 -->
		<div class="user-login">
			<a href="#">
				<img src="images/user.png">
				<span class="user-name">我爱你山河湖海</span>
			</a>
		</div>
	</div>
	<!-- 头部模块结束 -->

	<!-- banner广告轮播图开始 -->
	<div class="banner">
		<!-- 版心容器 -->
		<div class="banner-bg">
			<!-- 左对齐侧导航栏 -->
			<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">
				<!-- 课程表标题 course-title -->
				<div class="course-title"><h2>我的课程表</h2></div>

				<!-- 课程内容继续学习链接 course-study -->
				<div
最低0.47元/天 解锁文章
SHoadgnaw
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学成网完整版代码css.rar
02-28
适合初学HTML网页制作，个人报告作业
HTML.CSS静态 画江湖之不良人 网页（开源）
zhaoyang_m的博客
08-17 1113
网页是用HTML.CSS纯手写的，包括首页轮播的背景图也没有用到JS，参考B站大佬视频【CSS】轮播图效果，网页的创意抄袭B站这位UP的视频大学生不良人主题的网页设计。刷到过他的视频，感觉他的创意很好，就自己也手写了一个，功能没有他的那么多，就更精致了一点。点击跳转目录01-项目目录02-头部导航栏03-首页轮播背景图04-剧情概要05-主要人物06-相关视频07-底部背景08-404丢失网页09-网格壁纸网页。
HTML+CSS实例（米柚页面）
qq_56610467的博客
11-24 1672
米柚页面 基于HTML+CSS纯静态网络页面实例概述： 纯静态页面实现，没有js相关内容故难度不大，要求要会HTML基本的标签用法和CSS基本样式用法即可完成，页面的框架搭建是使用组合完成，图片使用，位置调整效果： 实现分析：首先我们要知道素材的基本参数（颜色&长宽）使用HBuilder X找到图片颜色属性 使用电脑画图工具找颜色/长宽 根据图片素材以及页面实现后的展示，可以分析出整个页面都是以的宽度居中后，形成的一条中轴线，其他的布局都是以的宽度进行的操作。下一步，分析页面图片的一个插入方式，不是所有的图
html静态登录界面代码_BootDo-高效率、代码生成、面向微服务的开源框架，你了解吗？...
weixin_39994461的博客
11-28 203
BootDo是高效率，低封装，面向学习型，面向微服务的开源Java EE开发框架。BootDo是在SpringBoot基础上搭建的一个Java基础开发平台，MyBatis为数据访问层，ApacheShiro为权限授权层，Ehcache对常用数据进行缓存。BootDo主要定位于后台管理系统学习交流，已内置后台管理系统的基础功能和高效的代码生成工具， 包括：系统权限组件、数据权限组件、数据字典组件、核...
html广告网页完整代码,HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码 - 伊甸一点...
weixin_32807673的博客
06-04 3020
横幅广告(Banner)：1.横幅广告是网络广告的常见形式，一般位于网页的醒目位置上；当用户单击这些横幅广告时，通常可以链接到相应的广告页面；2.设计横幅广告时，要力求简单明了，能够体现出主要的中心主旨，鲜明、形象地表达出最主要的广告意图；3.横幅广告可以使静态图像，也可以是动态图像。一般而言，与静态横幅广告相比，动态横幅广告更醒目，更能吸引观众的注意力；4.当然这还是在恰当适合的前提下(讨厌那种...
html+css实战187-banner图
qq_41632427的博客
06-30 758
html
使用html+css实现网页布局案例
leeeeeena's blog
11-21 5936
使用html+css实现网页布局案例效果代码结构代码htmlcss 以前学习或者练习的案例代码都没有做整理，所以这段时间在回顾一下过去写的案例巩固下基础知识点，整个项目代码我会在后续放到github上，然后更新链接。 效果 代码结构 代码 html <!DOCTYPE html> <html> <head> <title>css网页页面</title> <meta charset="utf-8"/> <link r
30个HTML+CSS前端开发案例（完结篇）
热门推荐
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
用HTML+CSS做一个漂亮简单的花店网页【免费的学生网页设计成品】
HTML网页设计
08-06 5323
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
前端html+css（基础+案例）
weixin_43366437的博客
07-25 1081
html基础入门
HTML+CSS-练习作业-学成在线网站.zip
最新发布
01-01
HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业...
HTML+css的家乡美-静态站设计.zip
10-14
静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计....
基于Html+css+js实现的静态购物网站
06-30
5.提供商品购买操作功能，编写代码，实现以下功能：1）用户可以购买商品，将用户购买的商品放入购物车；2.用户可以查看购物车的内容，在用户查看购物车时，以你认为合适的方式或在页面合适位置，提示用户购买商品...
HTML + CSS + 练习静态页面 + 实现豆瓣首页
06-30
HTML + CSS + 练习静态页面 + 实现豆瓣首页
pink老师htmlcss学习 - 学成在线案例
03-26
2023.3.26
简约优雅，这个开源项目让你用 Deno 部署一个静态网页
ZicoChan的博客
10-09 576
在今年 5 月份的时候，Deno 1.0 发布了。Deno 是作者Ryan Dahl 在 Node 之后的又一大作，它是一个新的运行时，用于在 Web 浏览器之外执行 JavaScript 和 TypeScript，其采用 Rust 编写而成（最初用的是 Golang）。 今天介绍的项目就是使用 Deno + React 驱动的静态网页生成器，那么它与我们更熟悉的 Hugo、Jekyll 等相比，有什么区别呢，一起来看看吧。 项目名称：Pagic 项目作者：xcatliu 开源许可协议：MIT .
html生成器_搭建博客、自己的小窝？快来看看这些开源静态网站生成器
weixin_39761255的博客
11-22 285
作者：HelloGitHub-ChungZH相信很多人都想要搭建一个自己的博客或是给项目做文档网站。本文将要推荐的静态网站生成器（Static Site Generator, SSG），它做的事情就是把你的文档、内容（通常为 Markdown 文件）生成可发布成网站（html）的工具，这样你就可以专心创作，同时也有了一块自己发表自己想法的网站。然后 GitHub、Gitee 等均支持免费 Page...
HTML.CSS静态 原神 官方网页（开源）
zhaoyang_m的博客
08-09 2966
网页是由HTML和CSS写的，背景音乐和新闻列表有一点JS，对静态网页几乎没有影响，可删除。没有用到BootStrap之类的框架，对着官方网页F12，一点一点手写出来的，中间改动很多，类名都是照着官方网页源码起的，所以又臭又长。本人对前端了解不是很深入，对源码有问题的地方，尽量帮忙解决。
最热开源静态网站生成器 TOP 20
YunWisdom
04-16 1250
最热开源静态网站生成器 TOP 20 1、静态站点生成器Jekyll Jekyll 是一个简单的免费的Blog生成工具，类似WordPress。但是和WordPress又有很大的不同，原因是jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。 2、Go ...
HTML+CSS+JS实现原神官网静态页面代码
05-04
很遗憾，我无法提供完整的HTML CSS JS代码实现原神官网静态页面，因为这需要涉及到版权问题，同时原神官网的页面结构也非常复杂，需要大量的HTML和CSS技术。但是，我可以给您一些实现静态页面的一般步骤和技术： 1....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值