初学java 用java写一张名片

用java写一张名片

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">

body{
    background-image: url(bg.jpg); 
}

/* position 定位   
    absolute 绝对定位  （相对于父标签的位置） */
/*  中间的div*/
.main{
    width: 400px;
    height: 300px;
    background: white;


    /*  方式一 */
    /* position: absolute;
    top:  150px;
    left: 50%;
    margin-left: -200px; */ 

    /* 方式二 */
    margin:150px auto;
    border-radius: 8px;
    padding: 20px 30px;
}

.logo{
    width:200px;
}

p{
    margin: 5px 0px;
    font-size: 15px;
    font-family: 微软雅黑;
}
.phone{
    margin-top: 25px;
}
.photo{

    width:120px;
    border-radius: 50%;

    /*方式一  */
    /* position: absolute;
    top: 100px;
    right: 50px; */

    /* 方式二 */
    position:absolute;
    margin-left: 250px;
    margin-top: -180px;

}

.phone:before {
    content: '手机：';
}
.qq:before {
    content: 'QQ：';
}
.email:before{
    content: '电子邮箱：';
}
.edit{
    border: 1px solid #ccc;
    color: #ccc;
    padding: 5px 10px;
    border-radius: 5px;

    position: absolute;
    top: 10px;
    right: 30px;
    text-decoration: none;
}
.edit:hover{
    color: yellow;
    border: 1px solid yellow;
}
</style>

</head>
<body>

    <a class="edit" href="edit.jsp">编辑</a>

    <div class="main">
        <a href="http://www.zhiyou100.com">  
            <img class="logo" src="logo.png"></img>
        </a>

        <h1>@@@</h1>
        <p>=====</p>

        <p class="phone" >1234567890</p>
        <p class="qq">=====</p>
        <p class="email">[email protected]</p>

        <img class="photo" src="head.png"/>
    </div>
</body>
</html>

在这一段代码中，一些关键的知识点有：

position属性的用法

position的属性值有好几个，重要的就是：
position:absolute;绝对定位 相对于浏览器的定位 以左上角为依据  相对于父标签的位置 但会丢失原来的位置 一旦丢失原来的位置 就会依据父元素的父元素来决定定位
position:relative;相对定位 不会丢失原来的位置  可以解决绝对定位的问题
position：fixed;相对于浏览器固定定位 例如广告应用

初学java 用java写一张名片

用java写一张名片

在这一段代码中，一些关键的知识点有：

position属性的用法

这是老师写的代码，看了老师写的代码，觉得代码非常简洁、整齐，相比自己的代码，一眼就能看出自己很不熟练，要继续多联系多学习。

猜你喜欢