初学者第一周入门学习HTML、Css和JavaScript过程中遇到的问题和相关笔记
1.frag是HTML中的属性吗?
如<div class="head" frag="面板1">
<div class="language" frag="窗口01"> <div id="wp_nav_w01">代码中,frag的作用是什么??
2.jsp代码中如何加入HTML标签,从而更改一下jsp代码中文字显示的格式,比如要‘out.println("输出100个欢迎");’输出的字体为宋体,大小为初四、颜色为绿色怎么写?
在jsp中的java代码或者JavaScript代码都可以加入样式?
加粗换行可以写成:<% out.println("<b>输出100个欢迎</b><br>"); %>
或者<b><% out.println("打印100个欢迎:<br>");%></b>。
3.对一个大div中包含两个并列的div,如何设置实现这两个div同一水平线,居中显示,并且里面的文字和图片也是居中显示?
float:left;可以实现左对齐;
居中显示:设置里面两个div的height:700px左右?text-align:center; 但是垂直居中该怎么表示?
查询可知,有如下几种方式:
①div.demo{
position:absolute;height:200px;width:200px;}
②如果不想用position:absolute这样的脱离文档流的样式,那就可以尝试模拟表格的方法,设置父元素display:table,设置子元素display:table-cell,并设置vertical-align:middle。
③使用css3新增的flex布局完成。
设置父元素display:box; box-pack:center; box-orient:vertical;即可,记得要在前面加上浏览器前缀!
如:
[code].box{ width: 200px; height: 200px; border: 1px solid red; display: box; box-pack:center; box-orient:vertical; display: -webkit-box; -webkit-box-pack:center; -webkit-box-orient:vertical; }
④给被包含的div加上浮动属性,
float:left/float:right;
并且设置父级div的margin:0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,il{
margin: 0;
padding: 0;
}
.container{
margin :0 auto;
}
.container,.main,.footer{
width: 500px;
}
.header{
height: 100px;
background-color:#000;
}
.main{
background-color: #eee;
margin: 10px 0;
/*格式化上下文,给父级元素使用,bfc*/
overflow: hidden;
}
.content{
width: 300px;
background-color: orange;
height: 300px;
float: left;
}
.siderbar{
height:300px;
float: right;
width: 190px;
background-color: green;
}
.footer{
background-color: #000;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main">
<div class="content">主题内容1</div>
<div class="siderbar">主题内容2</div>
<!-- 额外标签法,抗拒浮动 low的小网站会这么写,额外加div-->
<!-- <div style="clear: both;"></div> -->
</div>
<div class="footer">版权说明</div>
</div>
</body>
</html>
4.清除浮动的四种方式:
1.一般不使用:给父级元素加高度。.main{height:500px;}
2.额外标签法
<!-- 额外标签法,抗拒浮动 low的小网站会这么写,额外加div-->
<!-- <div style="clear: both;"></div> -->
3.overflow:hidden
/*格式化上下文,给父级元素使用,bfc*/
overflow: hidden;
但是有内容出了盒子,就不能使用这个方法!!!
4.伪元素 clearfix:after{
...
}
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第一章 网页设计基础
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- HTML入门学习笔记--CSS 3D转换模块和背景相关(12)
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第二章 HTML基础
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- HTML入门学习笔记--CSS属性(2)
- 韩顺平_轻便搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理...
- ExtJS学习过程中遇到的问题笔记
- HTML、CSS、JavaScript 学习笔记
- 第二周HTML、Css和JavaScript入门+班级通讯录大作业中的难点问题(数据库、JSP页面等)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- HTML/CSS/JavaScript入门学习材料
- iOS 学习笔记二【cocopods安装使用和安装过程中遇到的问题及解决办法】
- HTML入门学习笔记--体验CSS(1)
- 学习Html、css和Javascript中的常用标签英文缩写笔记(可供同学们参考)
- 搬运自己的html学习笔记2-css的入门
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
- vue学习过程遇到的问题及解决问题贴整理(适合初学者)