HTML
junlingshiwo
这个作者很懒,什么都没留下…
展开
-
flex布局的小案例
今天所说就是利用flex布局做一个小案例。上边两张效果图,就是使用伸缩布局做成,只能是静态页面,它是可以随意拉伸,并且还不会让里面东西溢出来。再看下所写的代码,分了三个部分,再给其三部分的样式,就成效果图的了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>原创 2020-05-26 20:43:46 · 476 阅读 · 0 评论 -
常用css3属性
所说的就是transform属性,此属性应用2D或3D转换。接下来我们看看如何转换?1: 2D-变形-移动: transform:translateX()如图:图片是可移动的,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div...原创 2020-05-21 21:57:49 · 118 阅读 · 0 评论 -
css常用布局
一:圣杯布局与双飞翼布局两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适的三栏布局两者遵循特点:1 两侧宽度固定,中间宽度自适应;2 中间部分在DOM结构上优先,以便先行渲染;3 允许三列的任意一列称为最高列;4 只需使用一个额外的<div>标签。二:圣杯布局:...原创 2020-05-19 19:32:21 · 123 阅读 · 0 评论 -
伸缩布局(Flex布局)
Flex布局:常用的属性:1:flex-direction: 控制主轴方向; 取值有:row(默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴),row-reverse(与row相反),column(表示垂直方向从上到下排列,此时垂直方向轴线为主轴),column-reverse(与column相反)。2:justify-content:主轴子项的对齐方式; 取值有: flex-start(起始对齐), flex-end(结束对齐), center(居中对齐), spac...原创 2020-05-17 22:32:20 · 175 阅读 · 0 评论 -
登录页面代码段
登录页面的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>撩课-喜欢IT,就上撩课(itlike.com)</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="sty.原创 2020-05-14 16:06:38 · 413 阅读 · 0 评论 -
注册登录页面的呈现
说道登录 注册页面,大家都熟悉不过了,几乎每个使用的APP都会有的页面。而我也觉得这种页面很简单制作 ,于是就尝试的去做了。而我呈现的登录 注册页面就是下图: 一图是登录,二图是注册,其实两图的样式都很相似。所以只要做一个页面就可以。我们再看: 这是整个页面的头部,我们对头部的两个a标签进行样式处理。 接下来就是中间内容,我把它分成三个部分来做,各色箭头就代表了...原创 2020-05-14 16:01:40 · 533 阅读 · 0 评论 -
简书的网页的搭建
简书网页的搭建可分三部分说:第一部分:图中所示是头部导航,分为了头左边 中间 右边。原创 2020-05-09 22:30:50 · 427 阅读 · 0 评论 -
HTML-CSS 百度页面的搭建
今天所讲的的百度的页面搭建。可分为三部分来分析:【1】首先介绍头部的搭建:头部分为左边与右边,头左边主要有照片和文字搭建而成,也使用左浮,文字就简单使用margin-left来完成。头右边的样式都差不多,但右边的菜单框中【更多产品】样式繁多 更多产品就采用块级标签转成行内...原创 2020-03-01 22:11:16 · 887 阅读 · 0 评论 -
CSS中常见的属性
第一阶段的:<1> visibility 属性规定元素是否可见 ——visible(元素可见) , hidden(元素不可见)<2> cursor 规定光标的类型——pointer(规定光标为一只手) , move ,help.....<3> font属性的四种分类——font-fanily(默认字体,优先由第一个依次到第二个),font-siz...原创 2020-02-21 21:08:40 · 119 阅读 · 0 评论 -
HTML-CSS的相关内容
用河马牙医网页的制作来介绍下相关内容:河马牙医可以分为三个部分:(1)了解下它 的中间内容。中间有六个板块,就将其六个板块图片的大小垂直对齐,让它们的宽度都保持100%, body section{ margin:0;} section img{width:100%vertical-align:top}此代码就是把中间内容板块连接起来这个为效果图,可...原创 2020-02-19 22:55:26 · 88 阅读 · 0 评论 -
css模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ background-color: skyblue; ...原创 2020-01-15 20:21:19 · 77 阅读 · 0 评论