为了更好地排版，建议您
使用HTML结合
CSS来实现样式效果。以下是一个简单的示例代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>好看的排版</title>
<style>
* {
margin
: 0;
padding
: 0;
box
-sizing
: border
-box;
}
body {
font
-family
: Arial, sans
-serif;
font
-size
: 16px;
line
-height
: 1.6;
color
: #333;
}
.container {
max
-width
: 1200px;
margin
: 0 auto;
padding
: 0 20px;
overflow
: hidden;
}
.top {
text-align: center;
height
: 100px;
margin
-top
: 30px;
}
.banner {
height
: 60px;
margin
-bottom
: 10px;
}
.main {
margin
-top
: 30px;
margin
-bottom
: 10px;
text-align: center;
}
.main1 {
height
: 600px;
width
: 500px;
margin
: 20px auto;
padding
: 20px;
background
-color
: #fff;
border
-radius
: 10px;
box
-shadow
: 0 2px 4px rgba(0,0,0,.1);
}
.mt {
margin
-top
: 20px;
}
a {
text-decoration
: none;
color
: #333;
}
.a1, .a2 {
display
: inline
-block;
width
: 120px;
height
: 40px;
line
-height
: 40px;
text-align: center;
font
-size
: 18px;
border
-radius
: 10px;
transition
: background
-color .3s ease
-out, color .3s ease
-out;
}
.a1
:hover, .a2
:hover {
background
-color
: #ADD7EA;
color
: #fff;
}
.inp1 {
width
: 100%;
border
: 1px solid #ccc;
border
-radius
: 4px;
padding
: 10px;
font
-size
: 16px;
line
-height
: 1.6;
margin
-bottom
: 10px;
}
.left1 {
margin
-left
: 300px;
}
.left2 {
margin
-left
: 115px;
}
.left3 {
margin
-left
: 180px;
}
hr {
border
: none;
border
-top
: 1px solid #ccc;
margin
: 20px 0;
}
p {
font
-size
: 20px;
line
-height
: 1.6;
margin
-bottom
: 20px;
}
.pp1 {
margin
-left
: 180px;
}
.pp2 {
margin
-left
: 130px;
}
</style>
</head>
<body>
<header class="top">
<h1>网站标题</h1>
</header>
<nav class="banner">
<a href="#" class="a1">菜单1</a>
<a href="#" class="a1">菜单2</a>
<a href="#" class="a1">菜单3</a>
<a href="#" class="a1">菜单4</a>
</nav>
<div class="container">
<main class="main">
<h2>欢迎来到本网站</h2>
<p>这里是网站的简介，欢迎您的加入。</p>
<a href="#" class="a2">注册</a>
<a href="#" class="a2">登录</a>
</main>
<div class="main1">
<h3>联系我们</h3>
<form>
<label for="name">姓名：</label>
<input type="
text" id="name" name="name" class="inp1">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" class="inp1">
<label for="message">留言：</label>
<
textarea id="message" name="message" class="inp1"></
textarea>
<button type="submit" class="a1 mt">提交</button>
</form>
</div>
<hr>
<section>
<p class="pp1">这里是一段说明文字，可以用来介绍网站的内容或者其他信息。</p>
<p class="pp2">这里是另一段说明文字，可以用来介绍网站的内容或者其他信息。</p>
</section>
<footer>
<p>© 2021 网站名称</p>
</footer>
</div>
</body>
</
html>
```
以上代码中，
使用了一些常见的
CSS样式属性来实现排版效果，例如`font
-family`、`font
-size`、`line
-height`、`color`、`background
-color`、`margin`、`padding`、`
text-align`、`width`、`height`、`border`、`border
-radius`、`box
-shadow`等。同时
使用了`max
-width`和`overflow
: hidden`来控制容器的最大宽度和溢出处理，以及
使用了`display
: inline
-block`和`transition`来控制链接的样式和交互效果。
文章讨论了在iOSSafari中，TextArea文本域的文本对齐样式justify不起作用的问题，解决方案是为TextArea添加`white-space:normal;`样式，同时指出此方法在div中有效。
扫一扫
3385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
