入门小项目
web 前端基础的收官：从建目录、三个 css 文件分工到 base.css 清默认样式，把学过的标签和布局串成一个真正的网站骨架。
项目
文件和目录准备
1、建文件夹 别用中文命名
网站名字的拼音+面向什么端+给什么人用
wei-pc-client（玮 pc 端 客户端）
然后所有相关的文件都放在该文件夹中
2、把 .ico 小图标放进该目录中
这个东西一般放在根目录
3、创建 images 文件夹和 uploads 文件夹
- images 中放的是网站固定使用的图片素材，如：logo、样式修饰图片… 等
- uploads 中存放的网站非固定使用的图片素材，如：商品图片、宣传图片…等（需要人上传 且方便更新）
4、创建 index.html 在根目录
5、创建 css 文件夹
然后在里面创好 3 个 .css 文件：
- base.css 放公共样式
- common.css 放多个网页中相同模块的样式
- index.css 放首页样式
这样一来 逻辑就非常清楚了
基本代码准备
先把 3 个样式表 link 下来
顺序还是有点讲究的
如果三个设置了同一模块不同样式
会后来者居上
所以把 index.css 连接在最下面
然后标题、关键字、说明文字以及小图标的准备
<title> </title>
接着做一些固定样式的设置
也就是设置 base.css
其实这个可以保存起来 以后都可以直接 cv
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
/* 內减模式 */
* {
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
/* 左浮动 */
.fl {
float: left;
}
/* 右浮动 */
.fr {
float: right;
}
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
然后各个页面都有版心
应该将版心的样式写在 common.css 文件中去
.wrapper{
width: 1240px;
margin:0 auto;
}
后面再细化
对于页面中某板块的版心进行设置即可
比如首页的导航栏里的版心
.shortcut .wrapper {
}
根据设计图纸 自上而下 自左而右 分析 div 排版 利用浮动进行排版
学习思维
确定一层后 先把里面元素分析开来 利用背景颜色调整各版块位置 再添加各种细节 最后消除背景颜色
关于 logo 优化
因为 h 比单纯的 a 更有利于优化搜索引擎
所以 logo 以 h1 嵌套 a 的形式展示
<div class="logo">
<h1><a href="#">？？？</a></h1>
</div>
这样不能添加图片 但是可以添加背景图片
为了隐藏字不显示出来
最后
web 前端的基础就这些
要往后学需要了解 JavaScript、vue 框架等等 css 也有很多神奇之处
当前要懂得：
- 网页就是文件夹 有头绪地放好各类资源
- 学会一下 vscode 的小技巧
- 能看懂代码结构 精准使用选择器
- 分屏编写 html 和 css 文件
- 清楚布局思路 利用浮动、定位布局
- 以及一些拓展用法
现在做到的主要是能看懂 知道别人网页大概是个什么样子做出来的
学会"搬运" 积累素材
将学过的汇总起来 慢慢搭建一个自己的网站
一些有很多前端元素代码的网站 可以偷来用——
http://eleui.cn/search?s=s&k=VA
https://gitee.com/the_bar_drinks_milk/eggplant-knows-programming
附件
- web前端.docx
💬 评论