归档: 2015/1

0

CSS基础补充(1)

在给别人讲解一些重构的内容的时候,发现自己还有好多基础没有补上=。= 平时都是打完页面就没有想太多东西,或者解决了问题没有总结。 于是乎看了一些文章,在这里记录一下。 盒子模型 内边距外边距不会遮挡后面的元素 在 CSS 中,width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 外边距可以是负值,而且在很多情况下都要使用负值的外边距。 在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的边界向里收,文档流认的只是这个边界,不会管你实际的尺寸是多少。 margin百分比:相对于父元素 避免浏览器变小浮动乱跑:在所有盒子外面包裹一个container,确定宽度并使他居中 注意padding和width不要一起用。当设置width为100%的时候,会得到浏览器窗口的大小,但是padding却是另外计算的,所以会出现水平滚动条,多出来的padding撑出屏幕。

0

下拉菜单(2)

你知道我这几天都在干嘛吗^_^今天下午买的手柄到了!!!好开熏。

0

前端练习-Agentur(2)

区块blockHTML1234567<div class="block"> <img src="images/schaefer.jpg" alt="" class="blimg"> <div class="blcon"> <p>„Große Ideen haben eine unbändige Kraft. Bei Konzeption und Interface Design helfen wir, aus Ideen nachhaltige digitale Produkte zu entwickeln. Dabei stehen stets der User und die Zielsetzung im Mittelpunkt.“</p> <p class="author">- Christoph Schäfer, Interface Design & Web Development</p> </div></div> CSS123456789101112131415161718192021222324252627282930313233343536.block{ width: 100%; background-color: #F0694B; height: 300px;}.blimg { margin-left: 16px; height: 300px; float: left;}.blcon{ color: #FFF; float: left;/* width: 950px;*//* 加了宽度才能浮动到上面 */ padding: 45px 50px 50px 30px; font-size: 32px; line-height: 40px;/* 发现在这里设置margin到了比较窄的屏幕 文字会被挤下去 */ width: 855px;/* 来个固定的宽度就能解决问题啦 只是用Padding宽度会满屏 *//* 解决个毛线问题=。= */}.block .author/* 是用这种方法来写好 还是加个div在里面?标签不用加class*/{ color: #F6C3C9; font-size: 15px; margin-top: 18px;} 要说的都在注释里面了= =。一边打代码一遍写注释好欢乐的样子。

0

前端练习-Agentur(1)

HTML&CSSCSS初始化123456* {margin: 0; padding: 0; }a {color: #FFF; text-decoration: none; }::selection {background: #F0694B; color: #FFF;}::-moz-selection {background: #F0694B; color: #FFF;}/*.content::selection {color: #FFF;}.content::-moz-selection {color: #FFF;}*/ 啊这个自带的代码高亮好丑啊~刚开始没有在意用了*,现在改过来。body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}嗯,改成这样。然后是超链接的样式,去掉下划线,改变颜色。接下来是新学到的东西:元素状态伪类::selection: {attibute} 然后刚好用的是FF,刚开始怎么也没有效果,加上-moz-.

0

下拉菜单

最近几天在看慕课网上的前端视频。主要是下拉菜单的制作。先把代码贴上去,以后慢慢总结(考试周伤不起啊~~(那你还去看前端…)) 贴几个经典的吧: 1. 最普通的下拉菜单1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav</title> <style> * {margin: 0; padding: 0; } div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee;} ul {list-style: none; } ul li {position: relative; float: left; line-height: 40px; text-align: center; } a {display: block; text-decoration: none; color: #000; padding: 0 10px; height: 40px; } a:hover {color: #fff; background-color: #000;} ul li ul li {float: none; background-color: #eee; margin-top: 2px;} ul li ul {position: absolute; left: 0; top: 40px; display: none;} ul li ul li a{ width:80px;} ul li ul li a:hover {background-color: #06F;} ul li:hover ul{display: block;} </style></head><body> <div> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">课堂大厅</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div></body></html>

0

Thinkphp学习笔记(2)

3.主页作品展示模块 foreach不能直接修改数组的内容,如果要修改使用(引用传递): 1foreach ($list as $key => &$value) html文件内容只需要写一个li就可以了,使用<volist name="" id="" ></volist>来调用后台数据。 如果html文件是用<ul><li>来展示图片,<volist>标签要放到<ul>后<li>前;如果是div布局,放在div前。分页数字使用$page. 把逻辑代码都整合到Model中,在控制器中调用。如果需要重复的代码,用A方法实例化控制器,再调用控制器的方法。当需要不同的参数时再设置传入的变量,还可以设置变量的默认值。 4.作品详情模块 html中修改链接的地址:1__URL__/buying?id=$vo.id 使用get方法把作品的唯一id传递到控制器中。 注意不要混淆登陆信息与作品信息。当对一个一维数组进行foreach时可能造成乱码 按照相同原理进行数据的读取,赋值,渲染。

0

Git基础总结

教程地址 初始化 在现存的目录下,导入所有文件来创建新的 Git 仓库$ git init初始化后,在当前目录下会出现一个名为 .git 的目录,所有 Git 需要的数据和资源都存放在这个目录中。不过目前,仅仅是按照既有的结构框架初始化好了里边所有的文件和目录,但我们还没有开始跟踪管理项目中的任何一个文件。如果要开始添加:$ git add *.c $ git add README $ git commit -m 'initial project version' 已有的 Git 仓库克隆出一个新的镜像仓库$ git clone git://github.com/schacon/grit.git

0

Thinkphp学习笔记

大二上学期开始学习网站建设的知识,参加了校内的一个社团。刚开始学习的是HTML/CSS,关注重构方面,后期是PHP,后台方面。11月左右开始组队参加内部比赛,1个月后进行展示。因为某种不(mei)可(you)抗(ren)拒(yao)的原因,最后和一个大一的设计师组队。我负责前端和后台。作品最后拿了一等奖,我拿了最佳研发。接下来几天慢慢把当时做这个作品的各种坑写在这里。噢,最后的作品名是Gee!Jee!,目标是做一个众筹网站。

0

那些搭建Hexo的事儿~

Hexo优化修改原生内置的谷歌字体和jquery:由于某些众所周知的原因,ajax.googleapis.com和fonts.googleapis.com不能访问,导致加载博客会非常慢(观察浏览器的请求链接可以发现),所以都要替换掉。字体文件位于:hexo/themes/modernist/source/css_base/variable.styl,修改下面这句: https://fonts.go