哈尔滨建设信息网官网,广州搜索排名优化,在服务器上搭建网站,clouder认证考试网站建设前言 很多新手会觉得前端很难#xff0c;但其实前端很简单#xff0c;你知道了前端的写法套路就会变得很easy#xff0c;本篇教大家最快上手前端#xff0c;结合我上篇的内容一起看 因为是给新手看的#xff0c;所以后面会附上代码用过全部的知识点#xff0c;先给大家看… 前言 很多新手会觉得前端很难但其实前端很简单你知道了前端的写法套路就会变得很easy本篇教大家最快上手前端结合我上篇的内容一起看 因为是给新手看的所以后面会附上代码用过全部的知识点先给大家看看效果图 前端演示结果可在另一个文章里看视频
页面效果
本页面可实现页面跳转标题点击前是黑色鼠标移上去时粉紫色长按是灰色点击之后返回后标题变绿色。
页面源码
话不多说直接上代码
!doctype html
htmlheadmeta charsetutf-8meta namekeywords content商品展示meta namediscription content展示页面meta nameviewport contentwidthdevice-width,initital-scale100titlehomework/titlestyle* {margin: 0;padding: 0;}body {background-color: rgb(208, 223, 227);}ul {list-style: none; /*清楚默认指示器样式*/margin: 50px auto;}.one {border-top: 3px solid rgb(24, 95, 106);}li {width: 800px;background-color: white;margin: 30px auto;}img {display: inline-block;width: 200px;height: 140px;padding-top: 10px;}a {text-decoration: none;color: black;}a:visited {color: chartreuse;}a:hover {color: rgb(203, 68, 122);}a:active {color: darkgray;}.title {font-size: 18px;font-weight: 600;padding: 40px 10px 10px;border-bottom: 2px solid rgb(93, 143, 13);}p {width: 500px;margin: 10px auto;}.desc {display: inline-block;font-size: 12px;color: black;padding-left: 10px;vertical-align: middle;}/style/headbodyulli classoneh3 classtitlea hrefhttps://baike.baidu.com/item/%E7%BE%8A/1947 altsheep target_blank羊sheep/a/h3img classdesc srcimg/sheep.jpe alt羊sheep width474 height316p classdesc羊是偶蹄目洞角科绵羊属和山羊属的统称。公、母羊均有角公羊角长而粗壮呈螺旋状向左、右平伸母羊角细而短多数呈螺旋状向外上方斜伸鼻梁隆起耳大而不下垂前胸开阔背腰平直十字部稍高扁锥形小尾紧贴臀部。毛色甚杂。寿命10—15年左右。/p/lilih3 classtitlea hrefhttps://baike.baidu.com/item/%E7%8C%AB%E5%A4%B4%E9%B9%B0/74037 altowl target_blank猫头鹰owl/a/h3img classdesc srcimg/猫头鹰.jpg alt猫头鹰owl width860 height573p classdesc猫头鹰英文名owls是鸮形目鸟类统称。猫头鹰眼睛大双目均向前是区别于其他鸟类的特征。头部正面的羽毛排列成面盘部分种类具有耳状羽毛。因头大而宽长得与猫极其相似故名。通体羽毛大多为褐色散落点缀着浅色的细小斑纹羽毛稠密蓬松、柔软眼睛周围的羽毛呈辐射状两眼间细羽突出直到额头呈菱形部分种类具有耳状羽毛嘴短前端有向下弯曲的小钩嘴的根部没有蜡膜但多被硬一些的羽毛所掩盖脖子转动灵活具有特殊的颈椎结构头的活动范围可达到270度。猫头鹰的种类因体型、图案和颜色而异但每种猫头鹰都有猛禽的两个独特特征锋利的爪子和钩状的喙。/p/lilih3 classtitlea hrefhttps://baike.baidu.com/item/%E7%8C%B4%E5%AD%90/1593453 altmonkey target_blank猴子monkey/a/h3img classdesc srcimg/monkey.jpe alt猴子monkey width450 height300p classdesc猴子是灵长目一些动物的俗称。整个灵长目动物因进化等级的差异可分为两大亚目——原猴亚目和类人猿亚目 [11]又称为原猴类和猿猴类。其中原猴类指的是一些进化等级比较低等的原始猴类无论是在外观上还是习性上都与我们印象中的猴子有较大差别。猿猴类中又分为猴类和类人猿其中后者包括进化等级很高的长臂猿和猩猩它们最大的特征是没有猴子标志性的尾巴亲缘关系和人类更近一些。所以狭义地讲猴子是灵长目类人猿亚目除类人猿以外的所有种类。 [2]其实在科学意义上来说猴并不是一个严格意义上的分类单元。猴子在旧世界亚洲、非洲和欧洲以及新世界美洲都有分布这样的地理隔离让各自地域的猴子开始各自独立演化。/p/lilih3 classtitlea hrefhttps://baike.baidu.com/item/%E5%8C%97%E6%9E%81%E7%86%8A/48826 alt北极熊Polar target_blank北极熊Polar Bear/a/h3img classdesc srcimg/bear.jpe alt北极熊Polar width474 height355p classdesc北极熊学名Ursus maritimus是熊科熊属的一种动物是世界上最大的陆地食肉动物又名白熊。身体大而粗壮肩高可达1.6米。成年雄性体重在300-800千克之间头体长可达2.5米。雌性较小体重150-300千克体长1.8-2米。与棕熊相似只是没有肩部驼峰。头部比其他熊的头部相对较小耳小而圆颈部细长。皮肤为黑色由于毛发透明故外观上通常为白色也有黄色等颜色体型巨大凶猛。每只脚有五个脚趾爪子不可缩回前爪大而桨状适合在薄冰上游泳和行走。/p/li/ul/body
/html
代码涉及的知识点
1.首先是代码的整体框架加三要素标题title关键字keywords简介描述description
2.在body里写代码整体结构用到的标签如下
p 段落标签 a 超链接标签 href 跳转目标地址
列表
无序列表ul/li -嵌套使用 li中可以放其他标签
3.接下来对内容进行css装饰
类选择器
.类名{属性1属性值1属性2属性值2}
标签调用时用class“类名” 即可
id选择器唯一
#类名{属性1属性值1属性2属性值2}
用法和类选择器相同
两者区别最大的不同在于使用次数上
通配符选择器
* {属性1属性值1属性2属性值2}
能匹配到页面中所有的元素
多类名选择器
class中加多个属性并在head标签中定义
基础字体样式
开头空两格text-indent:2em; em相对于当前对象内文本的字体大小font-size尺寸
颜色设置color颜色英文
字体大小font-size18px 普遍使用14px一般都为偶数
字体粗细font-weightbold100~900400相当于normal700等价于bold一定要是100的整数倍
字体样式font-family”宋体“尽量转化为Unicode编码来写转换后去掉u
字体风格font-stylenormalnormal默认值italic斜体oblique倾斜字体
font综合设置字体样式
选择器{fontfont-style font-weight font-size/line-height font-family;} 使用font属性时必须按照上面的语法格式顺序书写不能更换顺序各个属性以空格隔开。 注意其中不需要的属性可以省略取默认值但必须保留font-size和font-family属性否则font属性将不起作用 color文本颜色
1.英文颜色
2.十六进制如#FF0000最常用
取色技巧qq截屏用鼠标对着想要取的颜色按ctrl然后按c就可以复制颜色色号
常见颜色#000000 纯黑 #FFFFFF 纯白 #FF0000 纯红 #00FF00 纯绿 #0000FF 纯蓝
注意#AABBCC类颜色可以简写为#ABC
3.RGB代码如红色可以表示为rgb25500或rgb100%0%0%
rgba 最后一位为透明度范围在0~1之间
注意如果使用RGB代码的百分比颜色值取值为0时也不能省略百分号
line-height行间距
属性值单位像素px相对值em百分比%基于当前标签的字体大小默认字体大小为16px
一般情况下行距比字号大78像素左右凑偶数
text-align水平对齐方式
left左对齐right右对齐center居中
text-indent首行缩进
1em就是一个字的宽度如果是汉字的段落1em就是一个汉字的宽度
text-decoration文本的装饰
通常用于给链接修改装饰效果
none默认。定义标准的文本
underline定义文本下的一条线下划线也就是链接自带的
overline定义文本上的一条线
line-through定义穿过文本下的一条线
a标签居中方式设置它的上一级标签居中
链接伪类选择器 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接鼠标按住的时候 注意写的时候顺序尽量不要颠倒按照lvha的顺序
总结 前端也是需要多练多写最快的记忆方式就是敲代码后面我会总结前端的笔记发出来方便大家学习下期再见。
