在原代码二的基础上,将文档里的代码二里的“今日新生开学....”文字放图片右侧,“more”放右侧中央
时间: 2024-10-18 12:12:48 浏览: 29
为了实现您要求的效果,需要对代码二中的HTML和CSS进行一些调整。以下是修改后的代码:
### 修改后的 HTML 和 CSS
#### HTML 部分
```html
<div class="content">
<div class="center_content">
<div class="fendou">
<img src="images/fendou.png" alt="奋斗" />
</div>
<div class="redianguanzhu left">
<div class="redianguanzhu1">
<span>热点关注</span>
<label class="right more-label"><a href="#">more>></a></label>
</div>
<div class="rediangz_xq">
<div class="image-and-text">
<img src="images/new2.jpg" alt="新生活" />
<div class="text-right">
<p class="biaoti">今日新生报到开学</p>
<p class="neirong">今天对学生来说,是重要的一天,2020年9月1日新生报到开学。学生们穿着校服,背着书包高高兴兴到学校……</p>
</div>
</div>
<div class="redian_list">
<ul>
<li><a href="#">2020年9月1日新生报到开学1 <span class="right">2020-09-01</span></a></li>
<li><a href="#">2020年9月1日新生报到开学2 <span class="right">2020-09-01</span></a></li>
<li><a href="#">2020年9月1日新生报到开学3 <span class="right">2020-09-01</span></a></li>
<li><a href="#">2020年9月1日新生报到开学4 <span class="right">2020-09-01</span></a></li>
</ul>
</div>
</div>
</div>
<!-- 其他部分保持不变 -->
</div>
</div>
```
#### CSS 部分
```css
body, h2, ul, li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
body {
font-family: "微软雅黑";
font-size: 14px;
color: #000;
background: url(images/bodybg.jpg);
}
a {
text-decoration: none;
}
.content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.center_content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.fendou {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.fendou img {
width: 800px;
height: 80px;
}
.redianguanzhu, .jingxuanxinxi {
width: calc(50% - 12.5px);
box-sizing: border-box;
margin-bottom: 20px;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.redianguanzhu1, .jingxuanxinxi1 {
background-color: #1a4aa7;
color: #fff;
padding: 10px;
position: relative;
}
.redianguanzhu1 span, .jingxuanxinxi1 span {
font-size: 16px;
}
.redianguanzhu1 label a, .jingxuanxinxi1 label a {
font-size: 12px;
color: #737373;
line-height: 30px;
}
.redianguanzhu1 label a:hover, .jingxuanxinxi1 label a:hover {
color: #54daff;
}
.rediangz_xq {
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
}
.image-and-text {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.text-right {
margin-left: 20px;
}
.miaoshu p {
margin: 0;
}
.biaoti {
font-weight: bold;
font-size: 16px;
}
.neirong {
font-size: 14px;
color: #747474;
}
.redian_list {
margin-top: 10px;
}
.redian_list ul li {
line-height: 30px;
padding-left: 15px;
background: url(images/icon.png) no-repeat left center;
}
.redian_list ul li a {
color: #747474;
display: block;
}
.redian_list ul li a:hover {
color: #164293;
}
.redian_list ul li span {
font-size: 11px;
color: #818181;
}
.more-label {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
```
### 解释
1. **HTML 部分**:
- 将 “今日新生开学....” 文字放在一个 `div` 中,并添加类 `text-right`。
- 使用 `display: flex` 和 `align-items: center` 来使图片和文字垂直居中对齐。
- 将 “more>>” 放在一个新的标签中,并添加类 `more-label`,以便在 CSS 中定位。
2. **CSS 部分**:
- 添加 `.image-and-text` 类来设置图片和文字的布局。
- 添加 `.text-right` 类来设置文字的左边距。
- 添加 `.more-label` 类来将 “more>>” 定位到右侧中央。
这样就可以实现您要求的效果。希望这些修改能帮助您达到预期的设计效果。
阅读全文