Разметка для стены как у Вконтакте [требует правки]
531
29 марта 2018, 06:58
Помогите пожалуйста сделать подобную разметку.
Например, выдернул из Вконтакте разметку в надежде, ее сделать под себя.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<link rel="shortcut icon" href="https://vk.com/images/icons/favicons/fav_logo.ico?6">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex, nofollow">
<title>ВКонтакте | Comments Widget</title>
<noscript><meta http-equiv="refresh" content="0; URL=/badbrowser.php"></noscript>
<link rel="stylesheet" type="text/css" href="https://vk.com/css/al/fonts_cnt.css?5181750877">
<link rel="stylesheet" type="text/css" href="https://vk.com/css/al/lite.css?44382325074">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/ui_common.css?20127131343">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/notifier.css?25914283136">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/ui_media_selector.css?21895212042">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/page.css?35388400547">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/post.css?20777607497">
<link type="text/css" rel="stylesheet" href="https://vk.com/css/al/widget_comments.css?31576140629">
</head>
<body class="is_rtl VK1 widget_body " style="cursor: default;">
<div id="system_msg" class="fixed"></div>
<div id="utils"><div id="lite_css"></div><div id="fonts_cnt_css"></div><div id="ui_common_css"></div><div id="notifier_css"></div><div id="ui_media_selector_css"></div><div id="page_css"></div><div id="post_css"></div><div id="widget_comments_css"></div><div id="queue_transport_wrap"><iframe id="queue_transport_frame" name="queue_transport_frame" src="https://queuev4.vk.com/q_frame.php?7"></iframe></div><div id="wide_dd_css"></div></div>
<div id="box_layer_bg" class="fixed"></div><div id="box_layer_wrap" class="scroll_fix_wrap fixed"><div id="box_layer"><div id="box_loader"><div class="pr pr_baw pr_medium" id="box_loader_pr"><div class="pr_bt"></div><div class="pr_bt"></div><div class="pr_bt"></div></div><div class="back"></div></div></div></div>
<div id="stl_left"></div><div id="stl_side"></div>
<a id="widget_focus_link" href="javascript: return;"></a>
<script type="text/javascript">domStarted();</script>
<div id="page_wrap"><div class="wcomments_wrap">
<div class="wcomments_page _wcomments_page wcomments_section_posts" style="width: 700px;">
<div class="wcomments_head _wcomments_head clear_fix">
<a class="wcomments_logo" href="/dev/Comments"></a>
<a class="wcomments_admin_icon" href="/editapp?id=6389466&section=admins" onclick="return nav.go(this, event)" title="Назначить администраторов"></a><span class="wcomments_count _wcomments_count">1 комментарий</span><span class="divider">|</span><a class="wcomments_admin_link_return" onclick="WComments.switchSection('posts')">вернуться</a><a class="wcomments_admin_link_browse" onclick="WComments.switchSection('admin_browse')">администрирование</a>
</div>
<div class="_wcomments_content wcomments_content">
<div class="_wcomments_form clear_fix">
<div class="wcomments_form">
<div id="submit_post_error" class="box_error wcomments_post_error"></div>
<a href="/gurovofficial" class="wcomments_form_avatar"><img src="https://sun1-15.userapi.com/c830400/v830400095/1a9e7/fucGoLbcCp8.jpg"></a>
<div id="submit_post_box" class="wcomments_post_box clear_fix" onclick="return cancelEvent(event)">
<div class="_emoji_field_wrap">
<div class="emoji_smile_wrap _emoji_wrap">
<div class="emoji_smile _emoji_btn" title="Используйте TAB, чтобы быстрее открывать смайлы" onmouseover="return Emoji.show(this, event);" onmouseout="return Emoji.hide(this, event);" onclick="return cancelEvent(event);">
<div class="emoji_smile_icon"></div>
</div>
</div>
<div id="post_field" class="wcomments_post_field dark submit_post_inited" onkeyup="Wall.postChanged()" onfocus="Wall.showEditPost()" contenteditable="true"></div>
<div class="placeholder"><div class="ph_input"><div class="ph_content">Ваш комментарий...</div></div></div></div>
<div id="submit_post" class="wcomments_submit_post clear_fix" onclick="event.cancelBubble=true;">
<div id="media_preview" class="clear_fix multi_media_preview"><div id="page_pics_preview1" class="page_pics_preview media_preview clear_fix"></div><div id="page_dpics_preview1" class="page_pics_preview post_thumbed_media page_media_sortable media_preview clear_fix"></div><div id="page_docs_preview1" class="page_docs_preview post_thumbed_media page_media_sortable media_preview clear_fix"></div><div id="page_pdocs_preview1" class="page_docs_preview media_preview clear_fix"></div><div id="page_ldocs_preview1" class="page_docs_preview media_preview clear_fix"></div><div id="page_mpics_preview1" class="page_pics_preview media_preview clear_fix"></div><div id="page_ppdocs_preview1" class="page_docs_preview media_preview clear_fix"></div><div id="page_progress_preview1" class="page_progress_preview media_preview clear_fix"></div></div>
<div class="addpost_button_wrap" id="reply_box_main">
<div class="checkbox wcomments_export_checkbox" id="wcomments_export" onclick="checkbox(this);" onmouseover="if(hasClass(bodyNode, 'wcomments_nano')) showTooltip(this, {text: "поделиться с друзьями", black: 1, shift: [5, 12, 0]});"><div>поделиться<span> с друзьями</span></div></div><button class="flat_button addpost_button" id="send_post" onclick="wall.sendPost()">Отправить</button>
</div>
<div id="page_add_media" class="page_add_media" onclick="Wall.showEditPost()" style=""><div class="media_selector clear_fix"><a class="ms_item ms_item_graffiti _type_graffiti" tabindex="0" data-title="Граффити" aria-label="Граффити" role="link"><span class="blind_label">Граффити</span></a><a class="ms_item ms_item_photo _type_photo" tabindex="0" data-title="Фотографию" aria-label="Фотографию" role="link"><span class="blind_label">Фотографию</span></a><a class="ms_item ms_item_video _type_video" tabindex="0" data-title="Видеозапись" aria-label="Видеозапись" role="link"><span class="blind_label">Видеозапись</span></a><a class="ms_item ms_item_audio _type_audio" tabindex="0" data-title="Аудиозапись" aria-label="Аудиозапись" role="link"><span class="blind_label">Аудиозапись</span></a></div></div>
</div>
</div>
</div>
</div>
<h2 class="page_block_h2 ">
<ul class="ui_tabs clear_fix wcomments_admin_tabs _wcomments_admin_tabs" onmouseover="uiTabs.tryInit(this)">
<li class="_admin_browse">
<div class="ui_tab ui_tab_sel" onclick="WComments.switchSection('admin_browse')" role="link">
Обзор
</div>
</li><li class="_admin_updates">
<div class="ui_tab" onclick="WComments.switchSection('admin_updates')" role="link">
Комментарии
</div>
</li><li class="_admin_bl">
<div class="ui_tab" onclick="WComments.switchSection('admin_bl')" role="link">
Чёрный список
</div>
</li><li class="wcomments_admin_tab_wrap">
<div class="ui_tab_plain" role="link">
<a href="/editapp?id=6389466&section=admins" onclick="return nav.go(this, event)">Назначить администраторов</a>
</div>
</li><li>
<div class="ui_tab_plain ui_tabs_progress" role="link">
</div>
</li>
<div class="ui_tabs_slider _ui_tabs_slider"></div>
</ul>
</h2>
<div class="_wcomments_posts_outer wcomments_posts_outer no_post_click wall_module wide_wall_module">
<div class="wcomments_posts_inner">
<div id="wcomments_posts" class="wcomments_posts"><div id="post8284510_15518" class="_post post wcomments_post reply_box_open" data-post-id="8284510_15518" onclick="wall.postClick('8284510_15518', event);" post_view_hash="eb67549712eee91233">
<div class="_post_content">
<a target="_blank" class="post_image" href="/gurovofficial">
<img src="https://sun1-15.userapi.com/c830400/v830400095/1a9e7/fucGoLbcCp8.jpg" data-post-id="8284510_15518" class="post_img">
</a>
<div class="post_content">
<div class="wcomments_post_content">
<div class="ui_actions_menu_wrap _ui_menu_wrap " onmouseover="uiActionsMenu.show(this);" onmouseout="uiActionsMenu.hide(this);">
<div class="ui_actions_menu_icons" tabindex="0" aria-label="Действия" role="button" onclick="uiActionsMenu.keyToggle(this, event);"><span class="blind_label">Действия</span></div>
<div class="ui_actions_menu _ui_menu"><a target="_blank" class="ui_actions_menu_item" onclick="wall.deletePost(this, '8284510_15518', '5c81dd7df0a8f27303');" tabindex="0" role="link">Удалить запись</a></div>
</div>
<div class="post_author"><a target="_blank" class="author" href="/gurovofficial" data-from-id="8284510" data-post-id="8284510_15518" data-post-click-type="post_owner_link">Иван Гуров</a> <span class="explain"><span class="wall_fixed_label"> запись закреплена</span></span></div>
<div class="post_info">
<div class="wall_text"><div id="wpt8284510_15518" class="wall_post_cont _wall_post_cont"><div class="wall_post_text zoom_text">Хотя это не предел)</div></div></div>
<div class="wcomments_post_footer clear_fix">
<div class="post_date"><span class="rel_date">24 мар в 1:21</span></div>
<div class="post_full_like_wrap clear_fix">
<div class="post_like_wrap">
<a target="_blank" href="#" class="post_like _like_wrap no_likes" onmouseover="Wall.likesShow(this, '8284510_15518')" onclick="return Wall.likeIt(this, '8284510_15518', 'ab734056d8d7b7aa57', event);">
<i class="post_like_icon _icon"></i>
<span class="post_like_link _link">Нравится</span>
<span class="post_like_count _count">0</span>
</a>
<span class="blind_label" tabindex="0" role="link" onclick="Wall.likesShowList(this, '8284510_15518')">Показать список оценивших</span>
</div>
</div>
</div>
</div>
</div>
<div class="replies"><div class="replies_wrap" id="replies_wrap8284510_15518" style="">
<div class="replies_list _replies_list" id="replies8284510_15518"><input type="hidden" id="start_reply8284510_15518" value="15521"><div id="post8284510_15521" class="reply reply_dived clear reply_replieable _post" data-post-id="8284510_15521" onclick="Wall.replyClick('8284510_15518', 15521, event, 8284510)">
<div class="reply_wrap _reply_content _post_content clear_fix">
<a class="reply_image" href="/gurovofficial">
<img src="https://sun1-15.userapi.com/c830400/v830400095/1a9e7/fucGoLbcCp8.jpg" width="40" height="40" class="reply_img" alt="Иван Гуров">
</a>
<div class="reply_content">
<div class="fl_r post_actions_wrap"><div class="post_actions"><div id="reply_delete8284510_15521" class="reply_delete_button reply_action fl_r" data-title="Удалить" onclick="wall.deletePost(this, '8284510_15521', '1adfae1eaff5363889');" onmouseover="showTitle(this);" aria-label="Удалить" tabindex="0" role="link"></div><div id="reply_edit8284510_15521" class="reply_edit_button reply_action fl_r" data-title="Редактировать" onclick="wall.editPost(this, '8284510_15521'); return false;" onmouseover="showTitle(this);" aria-label="Редактировать" tabindex="0" role="link"></div></div></div>
<div class="reply_author">
<a class="author" href="/gurovofficial" data-from-id="8284510">Иван Гуров</a>
</div>
<div class="reply_text"><div id="wpt8284510_15521"><div class="wall_reply_text">123</div></div></div>
<div class="reply_footer clear_fix" id="wpe_bottom8284510_15521">
<a href="#" class="like_wrap _like_wrap no_likes" onclick="return Wall.likeIt(this, '8284510_wall_reply15521', '553e801ab609bbc60d', event);" onmouseover="Wall.likesShow(this, '8284510_wall_reply15521')">
<span class="blind_label">Нравится</span>
<i class="like_icon _icon"></i>
<span class="like_count _count"></span>
</a>
<span class="blind_label" tabindex="0" role="link" onclick="Wall.likesShowList(this, '8284510_wall_reply15521')">Показать список оценивших</span>
<div class="reply_date"><a class="wd_lnk" href="/wall8284510_15518?reply=15521" onclick="return showWiki({w: 'wall8284510_15518', reply: '15521'}, false, event);"><span class="rel_date rel_date_needs_update" abs_time="сегодня в 23:30" time="1522096214">24 секунды назад</span></a></div>
<div class="reply_link_wrap">
<a class="reply_link _reply_lnk" tabindex="0" role="link">Ответить</a>
</div>
</div>
</div>
</div>
</div><div id="post8284510_15522" class="reply reply_dived clear reply_replieable _post" data-post-id="8284510_15522" onclick="Wall.replyClick('8284510_15518', 15522, event, 8284510)">
<div class="reply_wrap _reply_content _post_content clear_fix">
<a class="reply_image" href="/gurovofficial">
<img src="https://sun1-15.userapi.com/c830400/v830400095/1a9e7/fucGoLbcCp8.jpg" width="40" height="40" class="reply_img" alt="Иван Гуров">
</a>
<div class="reply_content">
<div class="fl_r post_actions_wrap"><div class="post_actions"><div id="reply_delete8284510_15522" class="reply_delete_button reply_action fl_r" data-title="Удалить" onclick="wall.deletePost(this, '8284510_15522', '32d7bb13af09af14c8');" onmouseover="showTitle(this);" aria-label="Удалить" tabindex="0" role="link"></div><div id="reply_edit8284510_15522" class="reply_edit_button reply_action fl_r" data-title="Редактировать" onclick="wall.editPost(this, '8284510_15522'); return false;" onmouseover="showTitle(this);" aria-label="Редактировать" tabindex="0" role="link"></div></div></div>
<div class="reply_author">
<a class="author" href="/gurovofficial" data-from-id="8284510">Иван Гуров</a> ответил <a href="/gurovofficial" class="reply_to" onclick="return wall.showReply(this, '8284510_15518', '8284510_15521', event)" rid="8284510" onmouseover="wall.postTooltip(this, '8284510_15522', {reply: 1})">Ивану</a>
</div>
<div class="reply_text"><div id="wpt8284510_15522"><div class="wall_reply_text"><a class="wall_reply_greeting" href="/gurovofficial" onclick="return wall.showReply(this, '8284510_15518', '8284510_15521', event)">Иван</a>, 4353</div></div></div>
<div class="reply_footer clear_fix" id="wpe_bottom8284510_15522">
<a href="#" class="like_wrap _like_wrap no_likes" onclick="return Wall.likeIt(this, '8284510_wall_reply15522', '7d7b16d09ebf7655b6', event);" onmouseover="Wall.likesShow(this, '8284510_wall_reply15522')">
<span class="blind_label">Нравится</span>
<i class="like_icon _icon"></i>
<span class="like_count _count"></span>
</a>
<span class="blind_label" tabindex="0" role="link" onclick="Wall.likesShowList(this, '8284510_wall_reply15522')">Показать список оценивших</span>
<div class="reply_date"><a class="wd_lnk" href="/wall8284510_15518?reply=15522" onclick="return showWiki({w: 'wall8284510_15518', reply: '15522'}, false, event);"><span class="rel_date rel_date_needs_update" abs_time="сегодня в 23:30" time="1522096219">19 секунд назад</span></a></div>
<div class="reply_link_wrap">
<a class="reply_link _reply_lnk" tabindex="0" role="link">Ответить</a>
</div>
</div>
</div>
</div>
</div></div>
<div id="reply_box_wrap8284510_15518"><div class="reply_box_inner_wrap">
<div id="reply_box8284510_15518" class="submit_post_box reply_box clear_fix" onclick="return cancelEvent(event)">
<a href="/gurovofficial" onclick="stopEvent(event)" class="wcomments_form_avatar"><img src="https://sun1-15.userapi.com/c830400/v830400095/1a9e7/fucGoLbcCp8.jpg"></a>
<div class="reply_form">
<input type="hidden" id="reply_to8284510_15518" value="">
<div class="_emoji_field_wrap">
<div id="reply_smile8284510_15518" class="emoji_smile_wrap _emoji_wrap">
<div class="emoji_smile _emoji_btn" title="Используйте TAB, чтобы быстрее открывать смайлы" onmouseover="return Emoji.show(this, event);" onmouseout="return Emoji.hide(this, event);" onclick="return cancelEvent(event);">
<div class="emoji_smile_icon"></div>
</div>
</div>
<div id="reply_field8284510_15518" class="reply_field submit_post_field" onfocus="return Wall.showEditReply('8284510_15518', event);" contenteditable="true" role="textbox" aria-multiline="true"></div><div class="composer_wdd clear_fix reply_composer_dd" id="reply_field8284510_15518_composer_wdd" style=""><div class="wdd_lwrap" style="display: none; width: auto;"><div class="wdd_list"></div></div><input type="hidden" id="reply_field8284510_15518_composer_wdd_term" value="false"></div>
<div class="placeholder" style="display: block;"><div class="ph_input"><div class="ph_content">Написать комментарий...</div></div></div></div>
<div id="submit_reply8284510_15518" class="submit_post clear_fix">
<div class="reply_warn clear" id="reply_warn8284510_15518" style="display: none;"></div>
<div id="reply_media_preview8284510_15518" class="reply_media_preview clear_fix multi_media_preview"><div id="page_pics_preview2" class="page_pics_preview media_preview clear_fix"></div><div id="page_dpics_preview2" class="page_pics_preview post_thumbed_media page_media_sortable media_preview clear_fix"></div><div id="page_docs_preview2" class="page_docs_preview post_thumbed_media page_media_sortable media_preview clear_fix"></div><div id="page_pdocs_preview2" class="page_docs_preview media_preview clear_fix"></div><div id="page_ldocs_preview2" class="page_docs_preview media_preview clear_fix"></div><div id="page_mpics_preview2" class="page_pics_preview media_preview clear_fix"></div><div id="page_ppdocs_preview2" class="page_docs_preview media_preview clear_fix"></div><div id="page_progress_preview2" class="page_progress_preview media_preview clear_fix"></div></div>
<div class="addpost_button_wrap">
<button class="flat_button addpost_button" id="reply_button8284510_15518" onclick="wall.sendReply('8284510_15518', event, {});" onmouseover="wall.replySubmitTooltip('8284510_15518', 1, this);" onmouseout="wall.replySubmitTooltip('8284510_15518', 0, this);" style="">Отправить</button>
</div>
<div class="page_add_media" id="reply_add_media_8284510_15518"><div class="media_selector clear_fix"><a class="ms_item ms_item_photo _type_photo" tabindex="0" data-title="Фотографию" aria-label="Фотографию" role="link"><span class="blind_label">Фотографию</span></a><a class="ms_item ms_item_video _type_video" tabindex="0" data-title="Видеозапись" aria-label="Видеозапись" role="link"><span class="blind_label">Видеозапись</span></a><a class="ms_item ms_item_audio _type_audio" tabindex="0" data-title="Аудиозапись" aria-label="Аудиозапись" role="link"><span class="blind_label">Аудиозапись</span></a></div></div>
<div id="reply_to_title8284510_15518" class="reply_to_title addpost_popt" style="display: none;"><span class="reply_to_cancel" onclick="return Wall.cancelReplyTo('8284510_15518', event);"></span><div class="reply_to_label">ответ <a class="reply_to_mem" onclick="return wall.showReply(this, '8284510_15518', '8284510_15521', event);">Ивану</a></div></div>
</div>
</div>
</div>
</div></div><input type="hidden" id="post_hash8284510_15518" value="a79ba7562e8d3c313a">
</div></div>
</div>
</div>
</div></div>
<button class="flat_button secondary wcomments_more _wcomments_more" onclick="WComments.showMore()" style="display: none;">Показать ещё</button>
</div>
</div>
</div>
</div>
<div></div>
<div class="progress" id="global_prg"></div>
</div></div></body>
</html>Там в css черт ногу сломит. Помогите сделать тоже самое, только textbox снизу чтобы был.
Главное чтобы как можно проще, без супер наворотов.
PS Только взамен like, кнопочки + (рейтинг) - .
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
-
18:31
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 48064 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30578 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24017 visits
- Как через css изменить цвет png изображения? 10424 visits
- Blob video url download 10016 visits
- Php curl запрос через прокси с авторизацией 9292 visits
- Работа с captcha vk api 8158 visits
© "hostciti.net" 18.4.2025 | 22:22