首页 > 其他分享 >css样式补充,项目前置认知,精灵图,背景图片大小,阴影,过渡,SEO简介

css样式补充,项目前置认知,精灵图,背景图片大小,阴影,过渡,SEO简介

时间:2022-12-17 15:45:45浏览次数:43  
标签:盒子 样式 精灵 背景图片 SEO 网页 css

1、css样式补充,项目前置认知,字体图标

学习目标:

u 能够在网页中使用 精灵图
u 能够使用 背景大小属性 ,设置背景图片的大小
u 能够认识 CSS书写顺序,提高代码专业性和浏览器渲染性能
u 能够使用的专业方式完成 项目结构搭建 和 基础公共样式

1. CSS样式补充(现在用的较少,了解即可)

1.1 精灵图的介绍

1.2 精灵图的使用步骤

\1. 创建一个盒子

\2. 通过PxCook量取小图片大小,将小图片的宽高设置给盒子

\3. 将精灵图设置为盒子的背景图片

\4. 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:x y

2.1 背景图片大小

测试如下:

3.1 文字阴影

4.1 盒子阴影

5.1 过渡常用

测试:

2、项目前置认知

目标:能够知道 SEO三大标签 ,能够设置网页的 ico图标 ,能够书写 版心公共类代码

学习路径:
	1. 网页与网站的关系
	2. 骨架结构标签
	3. SEO三大标签
	4. ico图标设置
	5. 版心

1.1 生活中的例子

1.2 网页与网站的关系

1.3 网页与网站的概念

Ø 网页:网站中的每一“页” 。例如:淘宝的主页、淘宝的登录页、淘宝的商品页等。

Ø 网站:提供特定服务的一组网页集合。例如:百度、淘宝、京东、黑马程序员等;

2.1 DOCTYPE文档说明

2.2 网页语言

2.3 字符编码(了解)

3.1 SEO简介

3.2 SEO三大标签

标签:盒子,样式,精灵,背景图片,SEO,网页,css
From: https://www.cnblogs.com/atao-BigData/p/16989045.html

相关文章

  • HTML内嵌CSS让三个DIV并列在一行中
    DIV内嵌CSS:<divstyle="width:98%;margin:auto;"><divstyle="width:30%;height:300px;background-color:rgb(145,176,145);float:left;">111</div><divsty......
  • CSS3 上传图片虚线边框
    .upload-area{margin-top:1.25rem;border:none;background-image:url("data:image/svg+xml,%3csvgwidth='100%25'height='100%25'xmlns='http://www.w3.o......
  • 谷歌上做SEO价钱大概多少,Google优化怎么收费?
    很多做外贸的老板一直头疼,自己组建团队去做优化跟外包其实在成本上有巨大的差距,所以目前谷歌seo代运营很火,关键是你找谁做,市场有没有性价比高的SEO服务?收费如何?答案是:非标......
  • 如何寻找英文外链资源,英文SEO高质量外链建设
    做谷歌seo,外链建设是重要的一个排名的手段,毫不夸张的说,谷歌想要把排名做好,就得有外链的支持。当然站内优化也很重要,这决定了网站的底子和基础排名,这里先不说站内优化的事。......
  • CSS单行/多行文本溢出隐藏
    前言在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢......
  • HTML5&CSS3.0基础部分目录-xyphf
    [置顶]​​CSS3.0入门笔记​​[置顶]​​animate.css动画库使用方法介绍​​[置顶]​​聊一聊HTML5的表单,话说这些表单你都用过吗?​​[置顶]​​聊一聊HTML5存储......
  • reset.css 2022
    /***ThenewCSSreset-version1.7.3(lastupdated7.8.2022)GitHubpage:https://github.com/elad2412/the-new-css-reset***//*Removeallthe......
  • 如何使用CSS提高页面性能
    一、前言大家好,我是CoderBin,每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面......
  • 01-html&CSS
    常用标签介绍  font<body><!--字体标签需求1:在网页上显示我是字体标签,并修改字体为宋体,颜色为红色。font标签是字体标签,它可以用来修改文本的字体,颜......
  • 妙啊!纯 CSS 实现拼图游戏
    本文,将向大家介绍一种将多个CSS技巧运用到极致的技巧,利用纯CSS实现拼图游戏。本技巧源自于​​TemaniAfif​​​的CodePen​​CSSOnlyPuzzlegame​​。一款完全......