初学者第一周入门学习HTML、Css和JavaScript过程中遇到的问题和相关笔记1.frag是HTML中的属性吗？2.jsp代码中如何加入HTML标签，从而更改一下jsp代码中文字显示的格式，比如要‘out.println("输出100个欢迎");’输出的字体为宋体，大小为初四、颜色为绿色怎么写？3.对一个大div中包含两个并列的div，如何设置实现这两个div同一水平线，居中显示，并且里面的文字和图片也是居中显示？4.清除浮动的四种方式：

59 阅读 0 评论 39 点赞

我是靠谱客的博主飞快冷风，最近开发中收集的这篇文章主要介绍初学者第一周入门学习HTML、Css和JavaScript过程中遇到的问题和相关笔记1.frag是HTML中的属性吗？2.jsp代码中如何加入HTML标签，从而更改一下jsp代码中文字显示的格式，比如要‘out.println("输出100个欢迎");’输出的字体为宋体，大小为初四、颜色为绿色怎么写？3.对一个大div中包含两个并列的div，如何设置实现这两个div同一水平线，居中显示，并且里面的文字和图片也是居中显示？4.清除浮动的四种方式：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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;即可，记得要在前面加上浏览器前缀！

如：

.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>

</div>
   <div class="footer">版权说明</div>
</div>
</body>
</html>