初学HTML,CSS

1.看视频教程

优达学城
课程名为 HTML CSS 和框
看了第一课时的内容

2.写网页

先看效果吧(比较简单)
我是介绍了一部自己比较喜欢的电影——这个杀手不太冷

用的是sublime text3
主要目录结构如下

.
|——portfolio
     |——toplist
           |——images //存放图片
           |——index.html 
           |——style.css

代码实现如下

//index.html
<div class="first">
    <div class="image">
        ![](images/matida.jpg) 
    </div>
    <div class="content">
        <div class="details">
            <a>DETAILS</a><br>
            country:France
            <br>
            language:English | Italian | French
            <br>
            starring:Jean Reno | Gary Oldman | Natalie Portman | Danny Aiello
            <br>
            directed by:Luc Besson
            <br>
            produced:Patrice Ledous
        </div>
        <div class="summary">
            <a>SUMMARY</a><br>
            Mathilda, a 12-year-old girl, is reluctantly taken in by Léon,a professional assassin, after her family is murdered. Léon and Mathilda form an unusual relationship, as she becomes his protégée and learns the assassin's trade.
        </div>
        <br>
        <div class="moive">
            <div class="part1">
            Mathilda:Is life always this hard,or is it just when you are a kid? <br>
            Léon:Always like this. 
            </div>
            
            <div class="part2">
            Léon:(referring to his plant) <br>
            It's my best friend. Always happy. No questions. 
            </div>
            
            <div class="part3">
            Mathilda:I hope you're not lying. Leon. I really hope that deep down inside there's no love in you. Because if there is...just a little bit of love in there for me...I think that in a few minutes you'll regret you never said anything. I love you. Leon. <br>
            </div>
        </div>
    </div>
</div>
<div class="second">
</html>

//style.css
.title{
    background:#5bbd74;
    color:white;
    font-size:60px;
    text-align:center;
    margin:20px;
    padding:10px;
}
.content{
    margin-left:600px;
    font-size:25px;
    text-align:left;
    margin-top:20px;
}
.image{
    margin:20px;
    height:20px;
    width:30px;
}
a{
    color:#5bbd74;
}
.part1{
    background:#5bbd99;
    opacity:0.6;
}
.part2{
    background:#5bbd99;
    opacity:0.8;
}
.part3{
    background:#5bbd99;
}

最后推荐一个css参考文档