app网站开发,电子商务网站的建设包含哪些流程,网页源代码提取视频,wordpress 编辑首页1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码#xff0c;以身体感悟带动头脑去理解新知识 3. 初学者切忌#xff0c;不要眼花缭乱#xff0c;不要四处找其它文档#xff0c;要坚定一个教授者的方式#xff0c;将其学通透#xff… 1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码以身体感悟带动头脑去理解新知识 3. 初学者切忌不要眼花缭乱不要四处找其它文档要坚定一个教授者的方式将其学通透才是好的学习方式。 4. 本篇css我不会讲具体样式如何写因为这些小细节你只需搜索自己便可以学会。我侧重于css的核心概念 盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放 一、CSS概念
它名字叫 层叠样式表(英文全称Cascading Style Sheets)是用来设计HTML表现的。
我们最重要的是明白它的“层叠”的意义也就是样式之间可以覆盖。
二、盒子模型 盒子模型的概念有助于我们认识元素的基本构成 1. 盒子模型的基本组成 我们把HTML页面中的布局元素看作是一个矩形的盒子也就是一个盛装内容的容器。
盒子模型有元素的内容、边框border、内边距padding、和外边距margin组成。 宽度(width) content宽度 padding-left(左内边距) padding-right(右内边距) borde-left border-right margin-left margin-right 》高度组成同理 2. 使用chrome的开发者工具查看元素结构 使用chrome的开发者工具查看css样式、网络请求是常用的开发手段可以方便开发者快速定位到问题目前我只介绍查看css样式 当然也可以直接按f12有的电脑可能需要按Fn F12才可以打开开发者工具 三、CSS 的常用选择器class(类选择器) 、id 、标签选择器 选择器的意义就是帮助开发者找到要被操作的元素 1. class 和 标签选择器的使用
经过之前的实践你应该至少使用过 class 和 标签选择器。如下代码
style/* class 类选择器 */.leftTopBox{ }/* 标签选择器它表示leftTopBox这个类选择器下面的所有li标签 */.leftTopBox li{}/stylebodyul classleftTopBoxli新闻/lilihao123/lili地图/lili贴吧/lili视频/lili图片/lili网盘/lili更多/li/ul
/body2. id 选择器的使用方法 style/*id选择器*/#head{color: aquamarine;}/stylebodydiv idhead/div/body
3. 层叠样式就是样式之间可以覆盖
接下来我们样式假设id、class 两个选择器都对同一个元素赋值了样式效果会如何
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle#head{color: green;}.head2{color: red;}/style/headbodydiv idhead classhead2我到底是什么颜色/div/body
/html经过实我们看到 id 选择器大于 class选择器剩下初学者自己实践就好。 四、flex布局 为什么直接推荐学习使用flex布局呢 因为在pc端、App、小程序都是统一支持Flex布局的一劳永逸。 这里我不想重复介绍直接借用阮一峰老师的博文。初学者学习基本布局就好以后实战逐步深入
Flex 布局教程实例篇 - 阮一峰的网络日志 五、结束语 没有任何一篇博客可以百分百将知识讲完、讲透学习只能是一步一步实践才会学的更多更深入。我个人认为初学时学的内容逻辑简单、思路清晰最重要所以我只是挑取核心部分初学者理解后可直接上手项目这就是我的思想逻辑。 css知识有很多我不建议初学者去事无巨细的学每个知识点我的看法是带着问题以实践的方式先将我博客逻辑跑通让你对前端有个整体观念从基础到最后发布网站别人可以访问到时你自己补充剩余。 记下来看我js更新吧努力中。。。
