#小维学院#--- broken thoughts

4.20: Section 6 Mock Newspaper Typesetting (1 day)

        It takes too much time and always feels too inefficient. Many typesetting functions are implemented in floats.

1. Set translucent frames at both ends of the picture

     div.content-left1 {
      	float: left; /*The background is on the left, first float to the left*/
        position: relative;
       }
      div.left-img {
        position: absolute; /*The semi-transparent frame on the left is positioned absolutely by position*/
        opacity: 0.5;
        left: 0;
        top: 0;
      }
      div.right-img {
        position: absolute;
        opacity: 0.5;
        right: 0;
        top: 0;
      }

2. Set the order of font styles

        font: italic bold 72px "Bold" ; /*Be sure to pay attention to the order of font styles*/

3. Set the initial letter style

      div.content2 .one:first-letter{ /*Select the first letter*/
        float: left; if there is no float, it will start writing from the bottom of the big characters */
      }

    /*Text surrounds the picture, you can set the picture to float:right; */

Section 7: Implementing Common Typography

4. Representation of navigation (list of nav, shown on the right)

css：

nav ul {
	float: right; /*list floats right*/
}
nav ul li {
	display: inline-block; /*Set as an inline block, which can be arranged horizontally*/
	list-style: none;
	margin-right: 30px;
}

and:

/* Set the color of the login label separately, and remove the style on hover*/
nav ul li:last-child a { /*The a element of the last li list*/
	color: #E74F4D;
}
nav ul li:last-child a:hover {
	border: none;
}

5. Centering the list

div.list ul{
	list-style: none; /*List has no previous style*/
	padding: 50px 0;
}
div.list li {
	border-left: 2px solid grey;
	height: 50px;
	width: 25%; /*The width of each li occupies 25%, */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; /*box is border-box, including border, padding, content*/
	float: left;
	padding: 10px 68px;
}

The first li has no border:

div.list li.first_child {
	border: none;
}

6. The list is centered, move the mouse over the list, and the corresponding options can appear

html：

<div class="city_form">
	<ul>
		<li>
			<span>中国</span>
			<div class="city-list">
				<a href="#">美国</a>
				<a href="#">日本</a>
				<a href="#">英国</a>
				<a href="#">法国</a>
				<a href="#">德国</a>
			</div>
		</li>
		<li>
			<span>province</span>
			<div class="city-list">
				<a href="#">广东</a>
				<a href="#">福建</a>
				<a href="#">浙江</a>
				<a href="#">上海市</a>
				<a href="#">北京市</a>
			</div>
		</li>
		<li>
			<span>Cities</span>
		</li>
		<li id="input_btn">搜索</li>
	</ul>
</div>

css:

div.city_form ul li {
    position:relative;/*position positioning is helpful for list*/
}
div.city-list {
	position: absolute;
	overflow: hidden;
	top: 35px;
	left: 0;
	background-color: #E3E3E4;
	width: 234px;
	display: none; /*List is hidden by default*/
}
div.city-list a {
	display: block; /*The link is set as a block, and the width and height are set */
	width: 236px;
	height: 30px;
	text-align: left;
	padding-left: 25px;
	color: #323232;
	line-height: 30px;
	cursor: default;
	font: 12px "Microsoft Yahei";
	text-decoration: none;
}
div.city-list a:hover {
	color: #fff;
	background-color: #BE4E48;
}
div.city_form ul li:hover .city-list {
	display: block; /*After sliding through the li list, it will be displayed as a block*/
}