发表于: 2018-07-26 21:20:29

2 615


一、今天完成的事情


1、学习css布局

(http://zh.learnlayout.com/index.html)

    "display"属性:

    display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。大多数元素的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

    margin: auto;   

    设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

     max-width:   

    替代 width 可以使浏览器更好地处理小窗口的情况。

    max-width 定义元素的最大宽度。

    (该属性值会对元素的宽度设置一个最高限制。因此,元素可以比指定值窄,但不能比其宽。不允许指定负值。)

    inline-block:  

   你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择,但是使用 inline-block 会更简单:

   你可以用 display 属性的值 inline-block 来实现相同效果。

.box2

 { 

display: inline-block; 

width: 200px;   

height: 100px;   

margin: 1em; 

 }


2、CSS 边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许规定元素边框的样式、宽度和颜色。

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。


3、form表单样式

1)表单边框设置

取消浏览器自带边框、内边距:

input{border: none ;box-shadow: none ;outline:none;}

input{border:none;padding:0px;}

2)去掉input点击后的边框

input{outline:none;}

3)输入框缩进 

最开始以为要在input外面套个div再加框,搞来搞去都没弄好。。

想了很久,没想到居然是用padding-left。。。

input{padding-left:5px;}


4、缩小图片

学到一个放大缩小图片的方法

img

{

transform:scale (0.8);

}

就是把图片缩小为原始的0.8倍大小~


5、添加页面下方元素

登陆按钮:

中间有3个空格,这里用到空格的代码是&nbs。

      

忘记密码:

这里用到下划线是<u></u>;

6、调试任务4代码


1)修改第一行的position定位方式。采用以下的布局方式:中间的div(position:relative;)包含两侧div(position:absolute;)


2)将图标部分改为position:absolute; 定位方式。

3)画input部分的左边框。


二、遇到的问题


1、在开发者工具视图下,网页版和手机版字体大小不一样。


2、设置了min-width之后,浏览器缩小的时候,右边还是有空白。。。

搜到一个解决方法,试了下还真的有用。。原来是我浏览器的问题吗2333

body, html 

{

    overflow-x: hidden;

}

3、加边框宽度无反应

    解决方法:border样式语法:例如border:1px solid red; 之前没有按格式写。。加了solid之后就出来了~


4、input输入框自带padding和外框,需要消除

效果:


三、明日安排

1、主要解决自适应的问题。目前看来手机端和电脑端显示效果不同;

2、完善表单设置;

3、完成任务4;


四、收获

1、学习了css的常用布局方

2、学习了如何合理运用position定位来布局

3、学习了如何美化表单样

4、熟悉了html中常用的标签



返回列表 返回列表
评论

    分享到