网页界面ui设计内容 第1篇
涉及到适配器的问题
根据屏幕的宽度,会调整界面的显示,进行宽度的适配,又叫自适应界面,响应式界面
自适应页面(响应式页面):可以根据用户屏幕宽度做出改变
(当然现在也还有很多使用定宽页面)
一个网页相当于一个房间,一个个内容的摆放,相当于是把内容放进是一个个盒子中,然后摆放盒子,这个盒子叫做容器,盒子与盒子之间可以嵌套,所以容器与容器之间也可以嵌套。
所以网页布局的布局的不是内容,是容器
网页设计本质上探讨的都是空间的问题
网页界面ui设计内容 第2篇
我们在设计字体时,需要考虑字体显示是否准确,比如英文字母的时候,最好是用 Web 安全字体,比如(Arial、Verdana、Times Roma 等)
颜色选择:设计网页时,网站需要品牌的主色调以及辅助的色调,通过这种方式排除品牌其他颜色的干扰。颜色可以分为主色、次色和点缀色等。
颜色层次:使用不同的颜色层次来区分重要信息和次要信息。例如,主色用于标题和重要按钮,次色用于次要按钮和链接。
颜色一致性:在设计过程中,我们要不断地自定义颜色规范,确保在整个网站中使用一致的颜色,然后在相同类型的组件(按钮、链接、标题等)应使用一致的颜色,保持视觉的一致性原则,避免用户产生质疑。
网页 UI 设计不仅仅是关于美学,更是关于功能性和用户体验的优化,一份全新的网页 UI 设计规范会促使你在设计中注重细节,更会引导你成为专业的设计师。好啦,以上就是我为大家整理的最新的网页 UI 设计规范,感兴趣的伙伴可以收藏起来!
网页界面ui设计内容 第3篇
例如:
其中src为属性,=等于号后的称为属性值
属性名=属性值
也可以起名字,类名class
默认情况下一个容器占一整行
想加加颜色即描述容器,用css语言,style=“”;分号表示结束
css一个分号结束一条css语句
width宽度 px为像素的意思
所以html和css一定是放在一起学的。
标签大约有120多个左右,常用的也就20多个左右。
每个标签常用的也就有四五个属性,属性就像每个英雄有四五个技能
查资料 搜W3C,有个w3c教程,自己学。
写样式的方法:
1.行间样式
2.嵌入样式:
通过是
.表示时class名 ,即类名
style后的type可加可不加
通过style标签写在head标签中
3.外联样式
彻底分离,写在CSS文件中
优点:
效率高,同时修改替换
新建:最好与html文件对应
通过link标签,加到head文件中,href中的路径不一定是本地的也可以是在线的。
rel为,type可有可无,herf为链接
标签名前不加. class名前要加., 语言规范
结构在html中写,样式在css中写
span标签
不会独占一行
br标签代表空的一行
注释c+/
div是块级标签,block 特点: 1.可以定义宽度高度(如果不定义宽度,默认占满顶行) 2.不管多大多小,独占一行
显示属性:
属性的特点不一样,用法也不一样
只要能看到的具体大小的就用块级标签,不能用内联-块级标签
因为块级标签是顶格对齐
而内联标签是文字基线对齐
空隙是内联标签换行空格带来的
那块状标签默认是上下排列的,如何让他们横向排列呢?
.方法叫选择器,通过类名选择选择器,
独占一行指独占父级的一整行
原因:网页布局是分层的,分三层
1.最底层:普通文档流
不加float时,默认为普通文档流
普通文档流中是分块级和内联的。
2.中间层:浮动层
元素浮动以后会提升到浮动层
所有浮动层的元素默认横向排列
CSS的注释 /* */
浮动层中不分块级和内联,都可以定义宽高,都是横向排列。
子级浮动,父级清除浮动,父级不清楚的话,内容会发生重叠。
如何清楚浮动?
1.要恢复父级的高度,手动写。缺点:父级的高度定死了。超过的称为内容溢出,溢出是不会把下面的顶下去的。
溢出隐藏的意思。要算溢出的内容的要给定高度,强制计算父级的高度,强制父级格式化。
3.最高层是定位层
上午最重要的两个点: 1.三个显示属性
2.浮动:子级如何设浮动?重叠后如何清父级浮动?
body不需要清浮动
就近原则
浮动会自动折行,如果遇到高度不一致的话,会卡在那里,就像流水一样卡在那里
外边域
在普通文档流中,margin top和buttom和合并,称为塌陷
在浮动层上,是相加的,不会塌陷
如果没有任何空间中阻隔,会出不去
子级溢出父级
用padding,
overflow:hidden
盒子模型,不仅自己本身有大小宽高,而且外面还有
padding 内边距
border 边界
margin外边距
开发者工具:
user agent stylesheet
用户引擎
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
对应上右下左,谷歌的私有写法,1em在这里等价于16像素