网站推广 知乎,台州电子商务网站建设,深圳装修公司口碑排行,松江醉白池网站建设目录
CSS基础知识
前言
准备工作
网页项目规范
创建项目
布局
补充一部分属性
outline
border-radius
预告和回顾
后话 CSS基础知识
前言
本系列博客将分享层叠样式表#xff08;CSS#xff09;有关的知识点。
本期博客主要分享的是网页项目规范#xff0c;ou…目录
CSS基础知识
前言
准备工作
网页项目规范
创建项目
布局
补充一部分属性
outline
border-radius
预告和回顾
后话 CSS基础知识
前言
本系列博客将分享层叠样式表CSS有关的知识点。
本期博客主要分享的是网页项目规范outline属性部分伪类/伪元素的扩充以及圆角半径的相关知识点。听着有些不着边际但毕竟是补充嘛。
不是专业的科普博主主打一个分享知识写的不好多多包涵嘿嘿。
准备工作
软件【参考版本】Visual Studio Code
插件扩展包Open in browser, Live Preview, Live Server
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
网页项目规范
创建项目
对于一个标准的网页项目来说至少应当包含首页index.html、css文件夹、js文件夹、图片文件夹和icon图标文件夹。
一个简单的项目在VS的资源管理器中打开大概是这个样子的 其中首页的名称index是固定的其他的界面都可以通过这个界面来跳转。对于服务器来说它识别一个项目都是默认寻找index.html文件的。
在css文件夹中一般保存页面名样式表文件后缀来代表对应页面的样式。
当然有时我们还会看到common.css这样的样式文件它通常负责全局通用的一些样式。
在javascript文件夹中通常保存与用户交互的脚本文件同样也是页面名脚本文件后缀。
有时我们还会引入一些第三方的脚本文件比如JQuery的脚本文件这个仅做了解后面JS部分我会再说。
image文件夹通常保存网页的雪碧图或者一些LOGO文件等。对于一些比较大的图片一般会使用数据库后期导入而不是提前放到image中。
favicon文件夹会保存一些小图标比如标题栏图标等。
布局
通常来说在制作网页时我们会拿到网页的设计稿一般为psd文件也就是PS文件。
在设计稿已给出的情况下我们就不能凭感觉去制作一个网页了而是需要百分之百还原设计稿的尺寸。
那么既然要完全还原设计稿可以使用哪些方式呢
首先当然是我们的Photoshop用它来处理一个设计稿是最原始也是最精准的。我们可以利用PS的辅助线功能依次对齐网页元素的各条边记录它们的横纵坐标。利用坐标之间的差值就可以获取元素的标准尺寸了。
当然使用PS可能还涉及到取色器的使用这里当然可以使用PS自带的取色器。如果我们需要获取PS软件之外的颜色还可以使用到QQ的截图功能快捷键通常为CtrlAltA。此时鼠标悬浮的位置的颜色的十六进制代码就可以使用CtrlC复制下来。
第二种辅助测量的工具是MarkMan它是一个比较方便但是略微不精确的软件。在MarkMan的官网下载之后可能要按照提示安装air文件的解析软件看到的应该是这个界面 其实我们可以将设计稿的psd文件拖入其中这里给出一个示例网页的psd文件我暂时没有设计稿哈拖入其中后进入如下界面 使用下方正中间工具栏的第一个工具在想要测量的位置两端拉出测量区间就可以测量元素大小了 使用第二个工具可以知道任意点的坐标 使用第三个工具可以对设计稿的任意部位取色 使用第四个工具可以对设计稿的任意组件标记文字说明 使用最后一个工具可以移动设计稿按住Ctrl滚轮还可以缩放设计稿。 除了上述两种工具之外在正式的工作当中使用的比较多的还有pxcook墨刀等工具后面我会在前端前置知识专栏里专门来讲这些软件的使用在此就仅供了解了。
补充一部分属性
outline
该属性也叫轮廓线包裹于元素周围不占空间作用是突出元素。
常常用于input元素。
outline有三个属性值依次是outline-widthoutline-styleoutline-color默认的颜色为黑色。
比如现在我们有一个输入框 当我们光标选中它时它的外侧就会出现这样一个黑色的圈 如果我们给它加上outline属性
input:focus {outline: 1px solid blue;}
那么我们光标选中时的效果就可以发生改变 其中 :focus是一个补充的伪类也就是光标聚焦选中的效果。
类似的伪类还有 :selection代表被选中的文本。
border-radius
该属性用于设置元素的圆角简写的话从左上角开始依次以顺时针方向设置四个角向水平、垂直方向收回的长度。单位是px%em和rem。
不过我们现在看到的圆角按钮一般四个角都是统一设置圆角程度的且水平和垂直方向收回的程度通常是一致的。
当然如果要拆分开来那么其实可以拆分为8个属性比如上左水平border-top-left-radius属性名先写水平向后写垂直向仅供了解。
如果只用border-radius这一个属性名想单独设置某个方向的收缩则规则是先设置水平再设置垂直中间以 / 符号分开。
我们可以利用这个特性将下面这个长矩形变形 变形CSS代码如下
border-radius: 50% 50%/60% 60% 40% 40%;
变形后效果 预告和回顾
在下一期博客可能依然是对前面内容的补充也许确实该讲讲定位了...不过也会不定期的直接给出一些典型网页的制作流程。
对网页布局和制作感兴趣的朋友可以看下面的CSS专栏里面有很多讲解详尽的案例当前为第六期
专栏 | CSS入门http://t.csdnimg.cn/4bvCJ当然也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
期待与你在下一期博客中再次相遇
——疑似有点缺氧的【H2O2】
